添加其他按钮答案

【问题标题】：Add Additional Buttons添加其他按钮
【发布时间】：2018-06-04 03:50:59
【问题描述】：

我有一个场景，我有一组标准按钮可在 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，然后稍后再回来为场景添加一组独特的按钮？

【问题讨论】：

jqueryui.com/button
是的，我试过options
@mplungjan 我想设置一个带有一组按钮的对话框，然后再添加更多按钮
请创建一个minimal reproducible example 可能带有您想要的绘图
@mplungjan MCVE 存在，只需阅读

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

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

$( ".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() 您需要的按钮。

$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    buttons: [{
      text: "Add",
      id: "ui-btn-add",
      class: "add",
      click: function() {
        $(btnAdd).click();
        $("#ui-btn-add, #ui-btn-search").hide();
        $(this).dialog("close");
      }
    }, {
      text: "Search",
      id: "ui-btn-search",
      class: "search",
      click: function() {
        $(btnSubmit).click();
        $("#ui-btn-add, #ui-btn-search").hide();
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $("#ui-btn-add, #ui-btn-search").hide();
        $(this).dialog("close");
      }
    }]
  });
  $("#ui-btn-add, #ui-btn-search").hide();
  $("button[id*='opener']").click(function() {
    console.log($(this));
    if ($(this).hasClass("add")) {
      $("#ui-btn-add").show();
    } else {
      $("#ui-btn-search").show();
    }
    $("#dialog").dialog("open");
  });
});

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

【讨论】：

这部分正确...您的示例/答案假定在初始化期间将所有按钮编程到对话框中，然后根据需要显示/隐藏相应的按钮。就我而言，我更喜欢只在需要的时候加载需要的东西......你的没有问题，只是不是我的模式或实践。
@GoldBishop 我明白，上面的例子更适合你。除了隐藏按钮之外，您还可以删除它们并以与您建议的方法大致相同的方法重新添加它们。
一切都与上下文和设计有关……你的没有错，在组织设计模式之前它是正确的。我的方法更像是一种精简的最小方法。

【解决方案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 变量来完成。

【讨论】：