JqueryUI - 菜单

菜单小部件通常由带有弹出菜单的主菜单栏组成。弹出菜单中的项目通常具有子弹出菜单。只要保持父子关系（使用 <ul> 或 <ol>），就可以使用标记元素创建菜单。每个菜单项都有一个锚元素。

jQueryUI 中的菜单小部件可用于内联和弹出菜单，或作为构建更复杂的菜单系统的基础。例如，您可以创建具有自定义定位的嵌套菜单。

jQueryUI 提供了 menu() 方法来创建菜单。

句法

menu ()方法可以以两种形式使用 -

$(选择器,上下文).menu(选项)方法

menu (options)方法声明 HTML 元素及其内容应作为菜单进行处理和管理。options参数是一个对象，指定所涉及的菜单项的外观和Behave。

句法

$(selector, context).menu (options);

您可以使用 Javascript 对象一次提供一个或多个选项。如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 -

$(selector, context).menu({option1: value1, option2: value2..... });

下表列出了可以与此方法一起使用的不同选项-

先生。 选项和说明
1 残疾人

如果此选项设置为true，则会禁用菜单。默认情况下它的值为false。

选项 - 禁用

如果此选项设置为true，则会禁用菜单。默认情况下它的值为false。

句法

$( ".selector" ).menu (
   { disabled: true }
);
2 图标

此选项设置子菜单的图标。默认情况下，其值为{ submenu: "ui-icon-carat-1-e" }。

选项 - 图标

此选项设置子菜单的图标。默认情况下，其值为{ submenu: "ui-icon-carat-1-e" }。

句法

$( ".selector" ).menu (
   { icons: { submenu: "ui-icon-circle-triangle-e" } }
);
3 菜单

此选项是用作菜单容器的元素（包括子菜单）的选择器。默认情况下，其值为ul。

选项 - 菜单

此选项是用作菜单容器的元素（包括子菜单）的选择器。默认情况下，其值为ul。

句法

$( ".selector" ).menu (
   { menus: "div" }
);
4 位置

此选项设置子菜单相对于关联父菜单项的位置。默认情况下，其值为{ my: "left top", at: "right top" }。

选项 - 位置

此选项设置子菜单相对于关联父菜单项的位置。默认情况下，其值为{ my: "left top", at: "right top" }。

句法

$( ".selector" ).menu (
   { position: { my: "left top", at: "right-5 top+5" } }
);
5 角色

此选项用于自定义用于菜单和菜单项的 ARIA 角色。默认情况下它的值为menu。

选项 - 角色

此选项用于自定义用于菜单和菜单项的 ARIA 角色。默认情况下它的值为menu。

As part of the Web Accessibility Initiative (WAI), the Accessible Rich Internet Applications Suite (ARIA), defines a way to make Web content and Web applications more accessible. It is used to improve the accessibility of dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. You can read more on this at: ARIA

Syntax

$( ".selector" ).menu (
   { role: null }
);

默认功能

以下示例演示了菜单小部件功能的简单示例，未向menu()方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#menu-1" ).menu();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-1">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件menuexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

在上面的示例中，您可以看到一个可主题化的菜单，其中包含用于导航的鼠标和键盘交互。

图标的使用和位置

下面的例子演示了JqueryUI菜单功能中两个选项icon , 和position的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-2" ).menu({
               icons: { submenu: "ui-icon-circle-triangle-e"},
               position: { my: "right top", at: "right-10 top+5" }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-2">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件menuexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

在上面的示例中，您可以看到我们为子菜单列表应用了图标图像，并且还更改了子菜单位置。

$(selector, context).menu("action", params) 方法

menu ("action", params)方法可以对菜单元素执行操作，例如启用/禁用菜单。该操作被指定为第一个参数中的字符串（例如，“disable”禁用菜单）。查看下表中可以通过的操作。

句法

$(selector, context).menu ("action", params);;

下表列出了可以与此方法一起使用的不同操作-

先生。 动作与描述
1 模糊（[事件]）

此操作将从菜单中删除焦点。它通过重置任何活动元素样式来触发菜单的模糊事件。其中event的类型为Event，表示触发菜单模糊的事件。

Action - blur( [event ] )

This action removes the focus from a menu. It triggers the menu's blur event by resetting any active element style. Where event is of type Event and represents what triggered the menu to blur.

Syntax

$(".selector").menu( "blur" );
2 崩溃（[事件]）

此操作将关闭当前活动的子菜单。其中event的类型为Event，表示触发菜单折叠的事件。

Action - collapse( [event ] )

This action closes the current active sub-menu. Where event is of type Event and represents what triggered the menu to collapse.

Syntax

$(".selector").menu( "collapse" );
3 crashAll( [事件 ] [, 全部 ] )

此操作将关闭所有打开的子菜单。

Action - collapseAll( [event ] [, all ] )

This action closes all the open submenus. Where −

  • event is of type Event and represents what triggered the menu to collapse

  • all is of type Boolean Indicates whether all sub-menus should be closed or only sub-menus below and including the menu that is or contains the target of the triggering event.

Syntax

$(".selector").menu( "collapseAll", null, true );
4 破坏（）

此操作完全删除了菜单功能。这将使元素返回到其预初始化状态。此方法不接受任何参数。

Action - destroy()

This action removes menu functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.

Syntax

$(".selector").menu( "destroy" );
5 禁用（）

此操作会禁用菜单。此方法不接受任何参数。

Action - disable()

This action disables the menu. This method does not accept any arguments.

Syntax

$(".selector").menu( "disable" );
6 使能够（）

此操作启用菜单。此方法不接受任何参数。

Action - enable()

This action enables the the menu. This method does not accept any arguments.

Syntax

$(".selector").menu( "enable" );
7 展开（[事件]）

此操作将打开当前活动项目下方的子菜单（如果存在）。其中event的类型为Event，表示触发菜单展开的事件。

Action - expand( [event ] )

This action opens the sub-menu below the currently active item, if one exists. Where event is of type Event and represents what triggered the menu to expand.

Syntax

$(".selector").menu( "expand" );
8 焦点（[事件]，项目）

此操作激活特定的菜单项，开始打开任何子菜单（如果存在）并触发菜单的焦点事件。其中event是Event类型，表示触发菜单获得焦点的事件。item是一个 jQuery 对象，表示要聚焦/激活的菜单项。

Action - focus( [event ], item )

This action activates a particular menu item, begins opening any sub-menu if present and triggers the menu's focus event. Where event is of type Event and represents what triggered the menu to gain focus. and item is a jQuery object representing the menu item to focus/activate.

Syntax

$(".selector").menu( "focus", null, menu.find( ".ui-menu-item:last" ) );
9 isFirstItem()

此操作返回一个布尔值，该值表明当前活动菜单项是否是第一个菜单项。此方法不接受任何参数。

Action - isFirstItem()

This action returns a boolean value, which states if the current active menu item is the first menu item. This method does not accept any arguments.

Syntax

$(".selector").menu( "isFirstItem" );
10 isLastItem()

此操作返回一个布尔值，该值表明当前活动菜单项是否是最后一个菜单项。此方法不接受任何参数。

Action - isLastItem()

This action returns a boolean value, which states if the current active menu item is the last menu item. This method does not accept any arguments.

Syntax

$(".selector").menu( "isLastItem" );
11 下一个（[事件]）

此操作将活动状态委托给下一个菜单项。其中event是Event类型，表示触发焦点移动的事件。

Action - next( [event ] )

This action delegates the active state to the next menu item. Where event is of type Event and represents what triggered the focus to move.

Syntax

$(".selector").menu( "next" );
12 下一页（[事件]）

此操作将活动状态移动到可滚动菜单底部下方的第一个菜单项，如果不可滚动，则移动到最后一个菜单项。其中event是Event类型，表示触发焦点移动的事件。

Action - nextPage( [event ] )

This action moves active state to first menu item below the bottom of a scrollable menu or the last item if not scrollable. Where event is of type Event and represents what triggered the focus to move.

Syntax

$(".selector").menu( "nextPage" );
13 选项（选项名称）

此操作获取当前与指定optionName关联的值。其中optionName是String类型，表示要获取的选项的名称。

Action - option( optionName )

This action gets the value currently associated with the specified optionName. Where optionName is of type String and represents the name of the option to get.

Syntax

var isDisabled = $( ".selector" ).menu( "option", "disabled" );
14 选项（）

此操作获取一个对象，其中包含表示当前菜单选项哈希的键/值对。

Action - option()

This action gets an object containing key/value pairs representing the current menu options hash.

Syntax

var options = $( ".selector" ).menu( "option" );
15 选项（选项名称，值）

此操作设置与指定 optionName 关联的菜单选项的值。其中optionName是String类型，表示要设置的选项的名称，value是Object类型，表示要为该选项设置的值。

Action - option( optionName, value )

This action sets the value of the menu option associated with the specified optionName. Where optionName is of type String and represents name of option to set and value is of type Object and represents value to set for the option.

Syntax

$(".selector").menu( "option", "disabled", true );
16 选项（选项）

此操作为菜单设置一个或多个选项。其中options是Object类型，表示要设置的选项值对的映射。

Action - option( options )

This action sets one or more options for the menu. Where options is of type Object and represents a map of option-value pairs to set.

Syntax

$(".selector").menu( "option", { disabled: true } );
17 号 上一个（[事件]）

此操作将活动状态移动到上一个菜单项。其中event是Event类型，表示触发焦点移动的事件。

Action - previous( [event ] )

This action moves active state to previous menu item. Where event is of type Event and represents what triggered the focus to move.

Syntax

$(".selector").menu( "previous" );
18 上一页（[事件]）

此操作将活动状态移动到可滚动菜单顶部上方的第一个菜单项，如果不可滚动，则移动到第一个菜单项。其中event是Event类型，表示触发焦点移动的事件。

Action - previousPage( [event ] )

This action moves active state to first menu item above the top of a scrollable menu or the first item if not scrollable. Where event is of type Event and represents what triggered the focus to move.

Syntax

$(".selector").menu( "previousPage" );
19 刷新（）

此操作将初始化尚未初始化的子菜单和菜单项。此方法不接受任何参数。

Action - refresh()

This action initializes sub-menus and menu items that have not already been initialized. This method does not accept any arguments.

Syntax

$(".selector").menu( "refresh" );
20 选择（[事件]）

此操作选择当前活动的菜单项，折叠所有子菜单并触发菜单的选择事件。其中event的类型为Event，表示触发选择的内容。

Action - select( [event ] )

This action selects the currently active menu item, collapses all sub-menus and triggers the menu's select event. Where event is of type Event and represents what triggered the selection.

Syntax

$(".selector").menu( "select" );
21 小部件（）

此操作返回一个包含菜单的 jQuery 对象。此方法不接受任何参数。

Action - widget()

This action returns a jQuery object containing the menu. This method does not accept any arguments.

Syntax

$(".selector").menu( "widget" );

以下示例演示了如何使用上表中给出的操作。

使用禁用方法

下面的例子演示了disable()方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#menu-3" ).menu();
            $( "#menu-3" ).menu("disable");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-3">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件menuexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出 -

在上面的示例中，您可以看到菜单已禁用。

focus 和collapseAll 方法的使用

以下示例演示了focus()和CollapseAll方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var menu = $("#menu-4").menu();
            $( "#menu-4" ).menu(
               "focus", null, $( "#menu-4" ).menu().find( ".ui-menu-item:last" ));
            $(menu).mouseleave(function () {
               menu.menu('collapseAll');
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-4">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
      </ul>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件menuexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出 -

在上面的示例中，您可以看到焦点位于最后一个菜单项上。现在展开子菜单，当鼠标离开子菜单时，子菜单关闭。

菜单元素的事件管理

除了我们在前面几节中看到的菜单（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。下面列出了这些事件方法 -

先生。 活动方式及说明
1 模糊（事件，用户界面）

当菜单失去焦点时会触发此事件。

Event - blur(event, ui)

This event is triggered when a menu loses focus. Where event is of type Event, and ui is of type Object and represents the currently active menu item.

Syntax

$( ".selector" ).menu({
   blur: function( event, ui ) {}
});
2 创建（事件，用户界面）

创建菜单时会触发此事件。

Event - create(event, ui)

This event is triggered when a menu is created. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).menu({
   create: function( event, ui ) {}
});
3 焦点（事件，用户界面）

当菜单获得焦点或任何菜单项被激活时，会触发此事件。

Event - focus(event, ui)

This event is triggered when a menu gains focus or when any menu item is activated. Where event is of type Event, and ui is of type Object and represents the currently active menu item.

Syntax

$( ".selector" ).menu({
   focus: function( event, ui ) {}
});
4 选择（事件，用户界面）

当选择菜单项时会触发此事件。

Event - select(event, ui)

This event is triggered when a menu item is selected. Where event is of type Event, and ui is of type Object and represents the currently active menu item.

Syntax

$( ".selector" ).menu({
   select: function( event, ui ) {}
});

例子

以下示例演示了菜单小部件功能的事件方法用法。此示例演示了事件创建、模糊和焦点的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-5" ).menu({
               create: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "Create event<br>" );
               },
               blur: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "Blur event<br>" );
               },
               focus: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "focus event<br>" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-5">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
      </ul>
      <span id = "result"></span>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件menuexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出 -

在上面的示例中，我们根据触发的事件打印消息。