Question

是否可以构建一个按钮数组并将其输入并将其代码转换为一个变量，我可以将其用于不同的案例场景，每个按钮后面有不同的代码？例如：

function showDialog(type, oEle, title, body)
{
    $("#confirms").children(':first').html(body);
    $("#confirms").attr('title', title).dialog({
        show: {effect: 'fadeIn', duration: 300},
        resizable: false,
        modal: true,
        buttons: {
            "Yes": function() {
                oEle.remove();
                $(this).dialog("close");
            },
            "No": function() {
              $(this).dialog("close");
            }
        }
    });
}

我想为不同的情况设置不同的按钮，所以我想多次调用showDialog函数，每次使用不同的按钮，使用不同的按钮执行按钮。

我该怎么做？

Answer 1

你的意思是

function showDialog(title, body, buttons) {
    $("#confirms").html(body).dialog({
        title: title,
        buttons: buttons
    })
}

jQuery(function () {
    $("#confirms").dialog({
        show: {
            effect: 'fadeIn',
            duration: 300
        },
        resizable: false,
        modal: true
    }).dialog('close');

    $('#one').click(function () {
        showDialog('remove one', 'some content', {
            "Yes": function () {
                $(this).dialog("close");
            },
            "No": function () {
                $(this).dialog("close");
            }
        })
    })

    $('#two').click(function () {
        showDialog('remove two', 'some content 2', {
            "Delete": function () {
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        })
    })
})

演示：Fiddle

Answer 2

那么在函数外部定义按钮对象呢？像：

var btns={
      "Option 1": function(){/*show dialog 1*/},
      "Option 2": function(){/*do something else*/},
      "Option 3": function(){/*show dialog 3*/},
      "Option 4": function(){/*do something else*/},        
  }

function showDialog(type, oEle, title, body, btns)
{
    $("#confirms").children(':first').html(body);
    $("#confirms").attr('title', title).dialog({
        show: {effect: 'fadeIn', duration: 300},
        resizable: false,
        modal: true,
        buttons: btns
    });
}

编辑： - 对于动态切换，您可以在更高级别定义btns对象。然后传递要在每次调用时显示的选项数组：

var showButtons=["Option 1","Option 4"];

function showDialog(type, oEle, title, body, showButtons){
    $.each(showButtons, function(i, j){
        if(btns[j]){
            btn[j] = btns[j];
        }
    });

    //show dialog
}

根据$(this)而言，它会起作用。对于像oEle参数这样的其他东西，你可以用一种方式定义一些函数，然后将它传递给clouser（很抱歉这个句子）。如下：

btn['btnUsingoEle']=function(){
    oEle=...;//by the virtue of closure oEle will be available in 
             //dialog callbacks. 
}

一组不同的确认按钮jQuery UI

2 个答案: