简化多个jQuery对话框函数

当我通过Stackoverflow和Google搜索时，找不到解决方案来简化我的代码（或者我没有找到确切的搜索词）。它真的让我感到困惑，我无法简化下面的代码。简化多个jQuery对话框函数

因为我是这个领域的初学者，所以我不得不重复所有相同的代码，当我可以结合的相似之处。

非常感谢您的帮助！

$('.detail-view').dialog({ 
    autoOpen: false, 
    draggable: false, 
    resizable: false, 
    closeOnEscape: true, 
    modal: true, 
    height: 'auto', 
    width: 600, 
    position: ['top', 150] }); 

$('.forgotpass').dialog({ 
    autoOpen: false, 
    draggable: false, 
    resizable: false, 
    closeOnEscape: true, 
    modal: true, 
    height: 'auto', 
    width: 400, 
    position: ['top', 150] }); 

$('.user0').load('php/usersetting.php').dialog({ 
    autoOpen: true, 
    draggable: false, 
    resizable: false, 
    closeOnEscape: false, 
    modal: true, 
    height: 'auto', 
    width: 500, 
    position: ['top', 150], 
    open: function(){ 
    $(this).parent().find('.ui-dialog-titlebar-close').hide(); 
    } }); 

$('.user1').load('php/usersetting.php').dialog({ 
    autoOpen: false, 
    draggable: false, 
    resizable: false, 
    modal: true, 
    height: 'auto', 
    width: 500, 
    position: ['top', 100] }); 

$('.user2').load('php/usersetting.php').dialog({ 
    autoOpen: true, 
    draggable: false, 
    resizable: false, 
    closeOnEscape: true, 
    modal: true, 
    height: 'auto', 
    width: 500, 
    position: ['top', 150], 
    open: function(){ 
    $(this).parent().find('.ui-dialog-titlebar-close').hide(); 
    } 
    });

来源

2013-07-20 rolodex

从一个基本对象开始，然后使用'$ .extend（）'来进行变化。另外，利用'''in selector语法来组合不同的调用。 – Pointy

由于绝大多数的你的选择是一样的，一个简单的答案是创建一个默认选项对象：

var defaults = { 
    autoOpen: false, 
    draggable: false, 
    resizable: false, 
    closeOnEscape: true, 
    modal: true, 
    height: 'auto', 
    width: 200, 
    position: ['top', 150] 
};

，然后使用$.extend你想覆盖特定的选项：

$('.detail-view').dialog($.extend({}, defaults, { 
    width: 600 
})); 
$('.forgotpass').dialog($.extend({}, defaults, { 
    width: 400 
}));

你可以在一个函数封装这个：

function createDialog(selector, options) { 
    $(selector).dialog($.extend({}, defaults, options)); 
} 

createDialog('.detail-view', { 
    width: 600 
}); 
createDialog('.forgotpass', { 
    width: 400 
});

或者，如果它是当然只是width：

function createDialog(selector, width) { 
    $(selector).dialog($.extend({}, defaults, {width: width})); 
} 

createDialog('.detail-view', 600); 
createDialog('.forgotpass', 400);

来源

2013-07-20 15:21:19

即使没有尝试代码，我可以理解它的简单性。你很快，我现在要试一试！谢谢！我马上回来。 – rolodex

完成和工作！非常感谢您向我介绍'$ .extend'！ – rolodex

@rolodex：很高兴，很高兴帮助！ –

创建一个对象，然后将它传递给每个对话框（）函数： var dialog_properties = {autoOpen:false, drag able: false, ...};

然后在所有对话框使用它（）函数也是类似的： $('.detailView').dialog(dialog_properties); $('.forgotPass').dialog(dialog_properties); ...

来源

2013-07-20 15:27:29

简化多个jQuery对话框函数

回答

相关问题