jquery - 输入 jQuery Block UI 语句的更快方法

Question

我目前在我的 Web 应用程序上使用 Block UI 模态插件 (http://www.malsup.com/jquery/block/)。

生成模态框需要输入一些 jQuery。我只是想知道我是否以最快的方式这样做。谁能建议一种更快的方法来输入下面的代码，因为我觉得我有点重复？

 $(document).ready(function () {

/*=======================================
MODAL WINDOW
=======================================*/

    // register window

    $('#register').click(function () {
        $.blockUI({
            message: $('#register_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#register_close').click(function () {
        $.unblockUI();
        return false;
    });

    // about window

    $('#about').click(function () {
        $.blockUI({
            message: $('#about_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#about_close').click(function () {
        $.unblockUI();
        return false;
    });

    // privacy window

    $('#privacy').click(function () {
        $.blockUI({
            message: $('#privacy_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#privacy_close').click(function () {
        $.unblockUI();
        return false;
    });

    // terms window

    $('#terms').click(function () {
        $.blockUI({
            message: $('#terms_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#terms_close').click(function () {
        $.unblockUI();
        return false;
    });

    // language window

    $('#language').click(function () {
        $.blockUI({
            message: $('#language_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#language_close').click(function () {
        $.unblockUI();
        return false;
    });

    // forgot password window

    $('#forgotpwd').click(function () {
        $.blockUI({
            message: $('#forgotpwd_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#forgotpwd_close').click(function () {
        $.unblockUI();
        return false;
    });

});

Answer 1

如果您只使用消息和 CSS，那么您可以创建一个返回对象的函数。就像是：

function blockUIConfig( elementID, width ) {
    return {
        message: $("#" + elementID),
        width: width != null ? width : "500px"
    }
}

然后你可以把它称为：

$('#register').click(function () {
    $.blockUI( blockUIConfig( "register_win" ) );
});

或者如果宽度不同：

$('#register').click(function () {
    $.blockUI( blockUIConfig( "register_win", "250px" ) );
});

Answer 2

首先在 dom-ready 处理程序之外添加一个函数：

function addBlockUI(element) {
   $(element).click(function () {
       $.blockUI({
           message: $(element+'_win'),
           css: {
               width: '500px'
           }
       });
   });

   $(element+'_close').click(function () {
       $.unblockUI();
       return false;
   });
}

然后为 dom-ready 处理程序中的每个元素添加一个调用：

addBlockUI("#register");
addBlockUI("#terms");
addBlockUI("#privacy");
addBlockUI("#about");
addBlockUI("#language");
addBlockUI("#forgotpwd");

Answer 3

为每个窗口添加一个类 -

好吧，我不知道您使用什么来触发打开窗口，即链接..按钮..div。所以在我的小提琴中，我只使用了按钮。

$('.windowClass').click(function(){  // <-- bind to all window elements with that class
    $.blockUI({
        message: $('#' + this.id + '_win'),
        css: {
            width: '500px'
        }
    });
});

$('[id$=_close]').click(function () { //<-- gets all elements with id's that end with close
    $.unblockUI();
    return false;
});

锚标签

<a id="register" class='openMod' href='#'>Register</a>
<a id="about" class='openMod' href='#'>about</a>
<a id="language" class='openMod' href='#'>language</a>
<a id="terms" class='openMod' href='#'>terms</a>
<a id="privacy" class='openMod' href='#'>privacy</a>

然后

$('a.openMod').click(function(e){
    e.preventDefault(); // <-- don't forget this
    $.blockUI({
        message: $('#' + this.id + '_win'),
        css: {
            width: '500px'
        }
    });
});

使用同一类更新链接

http://jsfiddle.net/qt9EZ/2/