2

これはプラグインでの私の最初の試みですが、これに関する「ハウツー」全体が欠けていると思います。

OKここに行きます：

フォーム検証用のエラーポップアップボックスを作成しようとしています。

このページのこの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

varを次のerrorBox = 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 に答える