Кнопка jQueryUI показывает подменю действий

Question

В документации jQueryUI есть примеры кнопок:

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

На этой странице я смотрю на самый правый пример с колесиком и стрелкой вниз.Предполагается, что нажатие на эту кнопку покажет какое-то меню действий.Однако они не реализовали остальное для этого примера.

Я собираюсь сделать что-то вроде этого, где каждый элемент вызовет некоторый код JavaScript.Есть ли хороший пример чего-то, что выглядит прилично (вот почему я смотрел на jQuery-UI).

Answer 1

Добавьте этот вызов к коду:

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

См .:

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

Answer 2

На этой странице представлен хороший пример того, как вы можете создать эти меню кнопок:

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