创建一个 jQueryUI 1.8 按钮菜单答案

【问题标题】：Create a jQueryUI 1.8 Button menu创建一个 jQueryUI 1.8 按钮菜单
【发布时间】：2010-04-14 21:04:08
【问题描述】：

现在 jQueryUI 1.8 已经发布，我浏览更新时发现了新的Button widget，尤其是带有SplitButton with a dropdown 的演示之一。该演示似乎表明 Button 小部件可用于在此处创建下拉菜单。

作为讨论问题，我想知道有什么方法可以使用这个新的 Button 小部件创建下拉菜单。

干杯。

【问题讨论】：

标签： jquery jquery-ui button drop-down-menu contextmenu

【解决方案1】：

您必须在按钮下方放置一个列表，其方式类似于此处为自动完成提供的演示：http://jqueryui.com/demos/autocomplete/。

基本上，您可以将button demo 中显示警报“可能显示带有选定操作的菜单”的代码替换为执行此操作的代码。这段代码可以触发许多 jQuery Menu 插件之一，like this one.

<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();
});

【讨论】：

【解决方案2】：

您也可以告诉它使用内置按钮事件创建菜单：

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

【讨论】：

【解决方案3】：

值得注意的是，我决定使用Bootstrap button dropdowns。

【讨论】：

我偶然发现了这篇文章。我感谢您发布此链接！哇！！！引导摇滚！
上面的链接显示的是旧版本的 Bootstrap。更新后的网址是getbootstrap.com。