Помощь в разработке плагинов jQuery

Question

Это моя первая попытка создания плагина, но я думаю, что мне не хватает всего "Как это сделать".

Хорошо, вот так:

Попытка написать всплывающее окно с ошибкой для проверки формы.

Мне нравится внешний вид и функциональность этого кода JavaScript на этой странице, см. Демонстрацию здесь и источник здесь.

Это в основном то, что я хочу сделать, если пользователь вводит неверные данные.

Теперь я попытался создать плагин jQuery с этим кодом, но он не работает, любая помощь будет отличной: -)

(function($){

/* Might use the fadein fadeout functions */
var MSGTIMER = 20;
var MSGSPEED = 5;
var MSGOFFSET = 3;
var MSGHIDE = 3;

var errorBox = function(target, string, autohide, options)
{
    var ebox        = $(ebox);
    var eboxcontent = $(eboxcontent);
    var target      = $(target);
    var string      = $(string);
    var autohide    = $(autohide);
    var obj = this;

    if (!document.getElementById('ebox')) {
        ebox = document.createElement('div');
        ebox.id = 'ebox';
        eboxcontent = document.createElement('div');
        eboxcontent.id = 'eboxcontent';
        document.body.appendChild(ebox);
        ebox.appendChild(eboxcontent);
        ebox.style.filter = 'alpha(opacity=0)';
        ebox.style.opacity = 0;
        ebox.alpha = 0;
    }
    else {
        ebox = document.getElementById('ebox');
        eboxcontent = document.getElementById('eboxcontent');
    }
    eboxcontent.innerHTML = string;
    ebox.style.display = 'block';
    var msgheight = ebox.offsetHeight;
    var targetdiv = document.getElementById(target);
    targetdiv.focus();
    var targetheight = targetdiv.offsetHeight;
    var targetwidth = targetdiv.offsetWidth;
    var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
    var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
    ebox.style.top = topposition + 'px';
    ebox.style.left = leftposition + 'px';
    clearInterval(ebox.timer);
    ebox.timer = setInterval("fadeMsg(1)", MSGTIMER);
    if (!autohide) {
        autohide = MSGHIDE;
    }
    window.setTimeout("hideMsg()", (autohide * 1000));

    // hide the form alert //
    this.hideMsg(msg) = function (){
        var msg = document.getElementById('msg');
        if (!msg.timer) {
            msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
        }
    };

    // face the message box //
    this.fadeMsg(flag) = function() {
        if (flag == null) {
            flag = 1;
        }
        var msg = document.getElementById('msg');
        var value;
        if (flag == 1) {
            value = msg.alpha + MSGSPEED;
        }
        else {
            value = msg.alpha - MSGSPEED;
        }
        msg.alpha = value;
        msg.style.opacity = (value / 100);
        msg.style.filter = 'alpha(opacity=' + value + ')';
        if (value >= 99) {
            clearInterval(msg.timer);
            msg.timer = null;
        }
        else 
            if (value <= 1) {
                msg.style.display = "none";
                clearInterval(msg.timer);
            }
    };

    // calculate the position of the element in relation to the left of the browser //
    this.leftPosition(target) = function() {
        var left = 0;
        if (target.offsetParent) {
            while (1) {
                left += target.offsetLeft;
                if (!target.offsetParent) {
                    break;
                }
                target = target.offsetParent;
            }
        }
        else 
            if (target.x) {
                left += target.x;
            }
        return left;
    };

    // calculate the position of the element in relation to the top of the browser window //
    this.topPosition(target) = function() {
        var top = 0;
        if (target.offsetParent) {
            while (1) {
                top += target.offsetTop;
                if (!target.offsetParent) {
                    break;
                }
                target = target.offsetParent;
            }
        }
        else 
            if (target.y) {
                top += target.y;
            }
        return top;
    };

    // preload the arrow //
    if (document.images) {
        arrow = new Image(7, 80);
        arrow.src = "images/msg_arrow.gif";
    }
};

$.fn.errorbox = function(options)
{
    this.each(function()
    {
        var element = $(this);

        // Return early if this element already has a plugin instance
        if (element.data('errorbox')) return;

        // pass options to plugin constructor
        var errorbox = new errorBox(this, options);

        // Store plugin object in this element's data
        element.data('errorbox', errorbox);
    });
};

}) (Jquery);

Как я это называю

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>jQuery Plugin - Error ToolTip</title>
    <script type="text/javascript" src="js/jquery.js">
    </script>
    <script type="text/javascript" src="js/jquery.errorbox.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            var name = document.getElementById('name');

            if(name == "") {
                $('#name','You must enter your name.',2).errorbox();
                alert("Blank");
            }
        });
    </script>
    <link rel="stylesheet" type="text/css" href="css/errorbox.css" />
</head>
<body>
    <div>
        Name: <input type="text" id="name" width="30"></input>
    </div>
</body>

Любая помощь по моему первому плагину была бы отличной, заранее спасибо.

- Phill

Answer 1

Переменная errorBox = function(... должна измениться на:

$.errorBox = function(...

тогда вы можете вызвать его на объекте jquery.

Во-вторых, для ясности вы можете использовать $('#eboxcontent') вместо document.getElementById('eboxcontent'). Это не будет быстрее, но "понятнее" другим разработчикам jquery.

Наконец, в jQuery есть много встроенных функций для затухания в течение определенного периода времени, и кажется, что вы создали свою собственную. Я знаю, что замирание jQuery совместимо с разными браузерами. просто используйте:

$('#someDivId').fadeOut(timeInMilliseconds);

Answer 2

var name = document.getElementById('name');

if(name == "") {
    //...
}

должно быть

var name = document.getElementById('name');

if(name.value == "") {
    //...
}

или

var name = $('#name').val();

if(name == "") {
    //...
}