jQuery 创建一个 jQueryUI 1.8 按钮菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2641028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a jQueryUI 1.8 Button menu
提问by Brian M. Hunt
Now that jQueryUI 1.8 is out, I was browsing through the updates and came across the new Button widget, and in particular one of the demos with the SplitButton with a dropdown. This demo seems to suggest that the Button widget could be used to create a dropdown menu here.
现在 jQueryUI 1.8 出来了，我浏览了更新并遇到了新的Button 小部件，特别是其中一个带有下拉菜单的SplitButton的演示。这个演示似乎表明 Button 小部件可用于在此处创建下拉菜单。
As a matter of discussion, I was wondering what ways there are to go about creating a dropdown menu with this new Button widget.
作为讨论的问题，我想知道有什么方法可以使用这个新的 Button 小部件创建下拉菜单。
Cheers.
干杯。
采纳答案by Brian M. Hunt
It may be worth noting that I decided to use Bootstrap button dropdowns.
值得注意的是，我决定使用Bootstrap button dropdowns。
回答by Robert Harvey
You would have to drop a list below the button, in a manner similar to the demo provided here for autocomplete: http://jqueryui.com/demos/autocomplete/.
您必须在按钮下方放置一个列表，其方式类似于此处提供的用于自动完成的演示：http: //jqueryui.com/demos/autocomplete/。
Essentially, you would replace the code in the button demothat displays the alert "could display a menu with a selected action" with code that does just that. This code can fire off one of the many jQuery Menu plugins out there, like this one.
本质上，您可以将按钮演示中显示“可以显示带有选定操作的菜单”警报的代码替换为执行此操作的代码。这段代码可以触发许多 jQuery Menu 插件之一，就像这个插件。
<div class="demo">
<div>
<button id="rerun">Run last action</button>
<button id="select">Select an action</button>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#rerun").button().click(function() {
alert("Running the last action");
})
.next()
.button({
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
.click(function() {
// Code to display menu goes here. <<<<<<<<<<<<
})
.parent()
.buttonset();
});
回答by Trafalmadorian
You could also tell it to create the menu using the built-in button events:
您还可以告诉它使用内置按钮事件创建菜单：
//...
<script type="text/javascript">
$(document).ready(function(){
$("#yourButtonsID").click(function(){
$("#yourDropDown").show();
});
});
</script>
</head>
<body>
<button id="leftButtonSection">Do Something</button>
<button id="yourButtonsID">Open Menu</button>
<div id="yourDropDown">
<ul>
<li>Option One</li>
<li>Option Two</li>
</ul>
</div>
</body>
