Create a jQueryUI 1.8 Button menu_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-27 10:58 出处：网络

Now that jQueryUI 1.8 is out, I was browsing through the updates and came across the new开发者_JAVA技巧 Button widget, and in particular one of the demos with the SplitButton with a dropdown. This dem

As a matter of discussion, I was wondering what ways there are to go about creating a dropdown menu with this new Button widget.

Cheers.

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

Essentially, you would replace the code in the button demo that 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.

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

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>

It may be worth noting that I decided to use Bootstrap button dropdowns.