创建一个jQueryUI 1.8 Button菜单

时间:2010-04-14 21:04:09

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

现在jQueryUI 1.8已经用完了,我正在浏览更新并遇到了新的Button widget,特别是其中一个带有SplitButton with a dropdown的演示。这个演示似乎表明可以使用Button小部件在这里创建一个下拉菜单。

作为讨论的问题,我想知道如何使用这个新的Button小部件创建一个下拉菜单。

干杯。

3 个答案:

答案 0 :(得分:2)

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

基本上,您将替换显示警报的“{3}}中的代码”“可以显示带有所选操作的菜单”,代码就是这样。这段代码可以触发其中一个jQuery Menu插件,button demo

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

答案 1 :(得分: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>  

答案 2 :(得分:1)

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