2

这是我第一次尝试插件，但我认为我错过了整个“如何”。

好的，这里是：

试图为表单验证编写一个错误弹出框。

我喜欢此页面上此 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>

对我的第一个插件的任何帮助都会很棒，在此先感谢。

--菲尔

4

2 回答 2

2

varerrorBox = function(...需要更改为：

$.errorBox = function(...

然后你可以在 jquery 对象上调用它。

其次，为清楚起见，您可能希望使用$('#eboxcontent')而不是document.getElementById('eboxcontent'). 它不会更快，但对其他 jquery 开发人员来说“更清晰”。

最后，jQuery 有许多内置函数用于在指定时间段内淡化事物，看来您已经构建了自己的函数。我知道 jQuery 的淡入淡出是跨浏览器兼容的。只需使用：

$('#someDivId').fadeOut(timeInMilliseconds);
于 2009-04-21T19:13:17.253 回答
1 
var name = document.getElementById('name');

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

应该

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

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

或者

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

if(name == "") {
    //...
}
于 2009-04-21T19:18:28.113 回答