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

Question

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

我需要添加第4个按钮（第4个可能的动作），我觉得它太多了。所以，我想为对话框添加一个下拉按钮（如第二张图片所示）。

这甚至可能吗？

非常感谢您的意见。

第一张图片：

第二张图片：

Answer 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>

<强> Screeshot：

Answer 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/