jQueryUI button shows sub-menu of actions

The jQueryUI documentation has examples of buttons:

http://jqueryui.com/demos/button/#icons

On this page I'm looking at the rightmost example with a wheel and a down arrow. The assumption is that clicking on this button will show an action menu of some sort. However t开发者_如何学JAVAhey didn't implement the rest for this example.

I'm looking to do something like this, where each item would trigger some javascript code. Is there a good example out there of something that looks decent (which is why I've been looking at jQuery-UI).

This page gives a good example of how you can create those button menus:

https://www.filamentgroup.com/lab/jquery-ipod-style-and-flyout-menus.html

Add this call to the code:

.menu( {
                              select: function(event, ui){
                                alert('selected ' + ui.item.text() );
                              } } );

See:

$(function() {
        $( "#gear" )
                .button({
                    text: false,
                    icons: {
                        primary: "ui-icon-gear",
                        secondary: "ui-icon-triangle-1-s"
                    }
                })
                .click(function() {
                    var menu = $( this ).parent().next().show().position({
                        my: "left top",
                        at: "left bottom",
                        of: this
                    });
                    $( document ).one( "click", function(event, ui) {
                      menu.hide();
                    });
                    return false;
                })
                .parent()
                    .buttonset()
                    .next()
                        .hide()
                        .menu( {
                              select: function(event, ui){
                                alert('selected ' + ui.item.text() );
                              } } );