jQueryUI button shows sub-menu of actions

Question

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 they 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).

Answer 1

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

Answer 2

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