Question

我有一个场景，我在jQuery对话框中有一组标准按钮，但根据其他条件，我需要添加其他按钮。

好消息是我不需要添加/删除按钮，只需添加。这些按钮将有效地触发PostBack，强制刷新页面内容。

$(divSearch).dialog('option', 'buttons',
    {   // @buttons
        "Add": function (evt) {
            $(btnAdd).click();

            // Close
            $(this).dialog("close");
        },
        "Cancel": function (evt) {
            $(this).dialog("close");
        }
    }
);

$(divSearch).dialog('option', 'buttons',
    {   // @buttons
        "Search": function (evt) {
            $(btnSubmit).click();

            // Close
            $(this).dialog("close");
        },
        "Cancel": function (evt) {
            $(this).dialog("close");
        }
    }
);

问题

我如何拥有一个通用的Dialog Init，然后稍后再回来为这些场景添加一组独特的按钮？

Answer 1

这在API文档中进行了讨论：http://api.jqueryui.com/dialog/#option-buttons

dplyr

您的示例缺少数组。应用于您的示例，这将是：

$( ".selector" ).dialog( "option", "buttons", 
  [
    {
      text: "Ok",
      icon: "ui-icon-heart",
      click: function() {
        $( this ).dialog( "close" );
      }

      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
);

希望有所帮助。您也可以应用所有按钮，$(divSearch).dialog('option', 'buttons', [ { text: "Add", click: function () { $(btnAdd).click(); $(this).dialog("close"); } }, text: "Cancel", click:function () { $(this).dialog("close"); } } ]); $(divSearch).dialog('option', 'buttons', [ { text: "Search", click: function () { $(btnSubmit).click(); $(this).dialog("close"); } }, { text: "Cancel", click: function () { $(this).dialog("close"); } } ]);或.show()您需要的按钮。

.hide()

工作示例：https://jsfiddle.net/Twisty/dow48098/

Answer 2

解决方案

参考：https://stackoverflow.com/a/19175417/659246

// Setup standard settings for Dialog
InitDialog(divSearch, 315
    , { // @buttons
        "Cancel": function (evt) {
            $(this).dialog("close");
        }
    }
    , function (evt) {  // @open
        $(this).parent().appendTo("form");
    });

// In a Function...Far, Far, Away from the Document.Ready
var btns = $(divSearch).dialog('option', 'buttons');
$(divSearch).dialog('option', 'buttons'
    , $.extend({}, {
        "Search": function (evt) {
            $(btnSubmit).click();

            // Close
            $(this).dialog("close");
        }
    }, btns)
);

我使用$.extend来获得我想要的结果。

解释

捕获现有的按钮：

var btns = $(divSearch).dialog('option', 'buttons');

根据您的需要，我需要在标准集前面添加一个按钮：

$(divSearch).dialog('option', 'buttons'
    , $.extend({}, {
        "Search": function (evt) {
            $(btnSubmit).click();

            // Close
            $(this).dialog("close");
        }
    }, btns)
);

如果您不关心订单，那么只需执行此操作：

$(divSearch).dialog('option', 'buttons'
    , $.extend(btns, {
        "Search": function (evt) {
            $(btnSubmit).click();

            // Close
            $(this).dialog("close");
        }
    })
);

如果您需要添加，减去或更改按钮对象，则可以通过btns变量执行此操作。

添加其他按钮

问题

2 个答案:

解决方案

解释