一个或两个用于添加和编辑的对话框实例?

时间:2012-05-03 19:15:56

标签: jquery jquery-ui

最好创建两个对话框实例,一个用于添加,一个用于编辑,或者是否可以使用一个对话框?

示例这就是我目前使用的

        // Add Dialog 
        $('#addProgramDialog').dialog({
            autoOpen: false,
            width: 400,
            height: 500,
            title: 'Add Program',
            buttons: {
                'Cancel': function () {
                    $(this).dialog('close');
                },
                'Save': function () {
                    saveProgramRequest();
                }
            }
        });


        // Edit Dialog 
        $('#editProgramDialog').dialog({
            autoOpen: false,
            width: 400,
            height: 500,
            title: 'Edit Program',
            buttons: {
                'Cancel': function () {
                    $(this).dialog('close');
                },
                'Update': function () {
                    updateProgramRequest();
                }
            }
        });

1 个答案:

答案 0 :(得分:1)

根据DRY原则,你不应该重复自己。在您的示例中,您将复制width,height,autoOpen参数和Cancel按钮的声明。您可以通过简单地使用jQuery的每个方法来循环对话框并根据需要进行自定义来防止这种情况。举个例子:

$('#addProgramDialog, #editProgramDialog').each(function(index, node) {
    var options = {
        //autoOpen: false,
        width: 400,
        height: 500,
        buttons: {
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    };

    if (node.id == "addProgramDialog") {
        options.title = 'Add Program';
        options.buttons['Save'] = function() {
            saveProgramRequest();
        }
    } else {
        options.title = 'Edit Program';
        options.buttons['Update'] = function() {
            updateProgramRequest();
        }
    }

    $(node).dialog(options);
});

这是一个jsFiddle,用于显示此示例 - http://jsfiddle.net/YTbnN/