更快地键入jQuery Block UI语句

Question

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

生成模态需要键入一点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

为每个窗口添加一个类-

我不知道你用什么来触发窗口的打开。。按钮。。divs。所以在我的小提琴上我只用了按钮。

$('.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/

Answer 2

如果您只使用消息和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 3

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

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

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

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