jQueryUI按钮显示操作的子菜单

jQueryUI button shows sub-menu of actions

本文关键字：菜单操作按钮显示 jQueryUI 更新时间：2023-09-26

jQueryUI文档中有按钮的示例:

http://jqueryui.com/demos/button/图标

在这个页面上，我正在看最右边的例子，有一个轮子和一个向下的箭头。假设单击此按钮将显示某种类型的操作菜单。然而，他们没有实现这个例子的其余部分。

我想做这样的事情，每个项目都会触发一些javascript代码。有没有一个很好的例子看起来不错(这就是为什么我一直在看jQuery-UI)。

这个页面给出了一个如何创建按钮菜单的好例子:

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

将此调用添加到代码中:

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