Combining with other widgets

Let's switch tracks now and take a look at some more in-depth examples of how you can use the menu widget, beginning with using it with a button.

An odd combination I hear you say, but not in reality; we can use both to build a nice little split button with a drop-down menu!

Note

Fortunately for us, a plugin has already been created by Mike Cantrell; we'll use this in our example. You can download a copy of this plugin from Github (https://gist.github.com/mcantrell/1255491); I've updated the version in the code download for use with jQuery 2.0 and UI 1.10.3.

Immediately after the link to jquery.ui.menu.js in menu2.html, add the following:

<script src="development-bundle/ui/jquery.ui.button.js"></script>
<script src="js/jquery.ui.splitbutton.js"></script>

Alter the final <script> element as follows:

<script>
  $(document).ready(function($){
    $("#split-button").splitButton();
  });     
</script>        

Replace the existing...