优化jQueryUI中的功能

Posted 2023-05-08

【中文标题】优化jQueryUI中的功能

【英文标题】：Optimize functions in jQueryUI

【发布时间】：2011-06-06 00:49:15

【问题描述】：

我想优化一些代码（我使用jQuery UI）：

$（函数（） $('.click-login-modal').click(function() $('.login-modal').dialog('open'); 返回假； ) $('.login-modal').dialog( 自动打开：假， 宽度：500， 高度：300， 模态：真， 可调整大小：假， ) $('.click-register-modal').click(function() $('.register-modal').dialog('open'); 返回假； ) $('.register-modal').dialog( 自动打开：假， 宽度：500， 高度：300， 模态：真， 可调整大小：假， ) )

有可能吗？我有两种恭敬的情态。 （弹出对话框）

【参考方案1】：

var options = 
        autoOpen: false,
        width: 500,
        height:300,
        modal: true,
        resizable: false
    ;

$(".register-modal").dialog(options);
$(".login-modal").dialog(options);

$('.click-register-modal, .click-login-modal').click(function() 
    $(this).dialog('open');
    return false;
);

【讨论】：

ie 将与结束逗号相匹配！

谢谢，我认为$('.register-modal').dialog('open'); 应该是$('.login-modal, .register-modal').dialog('open');

@Mini - 实际上应该是$(this).dialog('open');。已更新。

奥普斯。优化后同时打开两个模态。为什么？

啊！我想他们必须一次绑定一个。

【参考方案2】：

我会使用选项卡方法，其中href 将指向元素 ID，因此您可以将模式类更改为 ID，然后使用：

var options = 
        autoOpen: false,
        width: 500,
        height:300,
        modal: true,
        resizable: false
    ;

$(".register-modal").dialog(options);
$(".login-modal").dialog(options);

$('.click-register-modal, .click-login-modal').click(function() 
    $($(this).attr('href')).dialog('open');
    return false;
);

或者，如果您需要使用类，则将哈希 # 替换为点 .，如果您不使用 LINKS，您可以使用 rel 属性指向您的对话框，甚至 jquery data。