带有操作下拉列表的 jQuery UI 对话框按钮答案

【问题标题】：jQuery UI dialog buttons with drop down list of actions带有操作下拉列表的 jQuery UI 对话框按钮
【发布时间】：2014-01-08 17:43:34
【问题描述】：

我有一个普通的 jQuery 对话框（如第一张图片所示）和 3 个可能的操作和 3 个按钮（因为这是对用户操作的确认）。

我需要添加第 4 个按钮（第 4 个可能的操作），我认为这太多了。所以，我考虑为对话框添加一个下拉按钮（如第二张图所示）。

这可能吗？

非常感谢您的意见。

第一张图片：

第二张图片：

【问题讨论】：

是的，可以在对话框中添加一些额外的标记，然后使用 CSS 重新排列/定位按钮和“特殊”按钮。
@SalmanA 你有一些代码示例吗？谢谢。
@AndyJones 如果我不知道是否可行，该怎么做？我不喜欢浪费任何人的时间。我先用谷歌搜索，但没有找到任何东西。有一个解决方案可以在对话框中添加下拉按钮，但我的问题是是否可以在对话框的页脚上添加下拉按钮。
这是answer。
@Jasen 我在问这个问题之前看到了这个。帮助不大。它谈论的是制作一个下拉按钮，但不是在对话框页脚上。我正在使用 jQuery UI 对话框。还是谢谢。

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

【解决方案1】：

Your idea 是对的。然而，z-index 问题实际上是一个溢出问题。要解决这个问题：

向对话框添加一个类，以便更容易自定义
将对话框上的溢出属性设置为合适的值

代码和演示：

$(function() {
  $("#dialogSuccess").dialog({
    buttons: [
      { "text": "Option 1", "class": "btn btn-primary", "click": function() { $(this).dialog("close"); } },
      { "text": "Option 2", "class": "btn btn-success", "click": function() { $(this).dialog("close"); } }
    ],
    create: function() {
      var menuHTML = "";
      menuHTML += "<div class='btn-group'>";
      menuHTML += "<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>Action <span class='caret'></span></button>";
      menuHTML += "<ul class='dropdown-menu pull-right' role='menu'>";
      menuHTML += "<li><a href='#'>Action 1</a></li>";
      menuHTML += "<li><a href='#'>Action 2</a></li>";
      menuHTML += "</ul>";
      menuHTML += "</div>";
      $(this).closest(".ui-dialog").find(".ui-dialog-buttonset").append(menuHTML);
    },
    dialogClass: "overflow-fix",
    width: "auto"
  });
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");

.overflow-fix {
  overflow: visible;
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- Note: I am not  sure what is the recommeded order of including jQuery UI and Bootstrap -->

<div id="dialogSuccess" title="Action was successful">
  <p>What do you want to do next?</p>
</div>

截图：

【讨论】：

哇！谢谢！这就是我喜欢 Stackoverflow 的原因！我接受了你的回答。

【解决方案2】：

我终于做到了，但对话框页脚上的 z-index 出现问题。

任何关于在对话框中显示下拉按钮的帮助将不胜感激。谢谢。

这是我需要的：

var dialogButtons = jQuery('#dialogSuccess').parent().find('.ui-dialog-buttonset');

dialogButtons.append('<div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button><ul class="dropdown-menu pull-right" role="menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li></ul></div>');

查看工作解决方案：

http://jsfiddle.net/loginet/xh3D2/2/

【讨论】：