登录
目录
当前位置： 首页 > 文档资料 > jQueryUI 入门教程 >

Menu

优质
小牛编辑
128浏览
2023-12-01

菜单小部件通常包含带弹出菜单的主菜单栏。 弹出菜单中的项目通常具有子弹出菜单。 只要保持父子关系（使用

    或
    ），就可以使用标记元素创建菜单。
每个菜单项都有一个锚元素。

jQueryUI中的Menu Widget可用于内联和弹出菜单，也可用作构建更复杂菜单系统的基础。 例如，您可以使用自定义定位创建嵌套菜单。

jQueryUI提供了menu（）方法来创建菜单。

语法 (Syntax)

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

  • $（selector，context）.menu（options）方法

  • $（选择器，上下文）.menu（“action”，params）方法

$（selector，context）.menu（options）方法

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

语法 (Syntax)

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

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

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

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

Sr.No.选项和说明
1disabled

如果设置为true此选项将禁用菜单。 默认情况下，其值为false 。

Option - disabled

如果设置为true此选项将禁用菜单。 默认情况下，其值为false 。

Syntax

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

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

Option - icons

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

Syntax

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

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

Option - menus

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

Syntax

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

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

Option - position

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

Syntax

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

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

Option - role

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

作为Web可访问性计划（WAI）的一部分，可访问富Internet应用程序套件（ARIA）定义了一种使Web内容和Web应用程序更易于访问的方法。 它用于改进使用Ajax，HTML，JavaScript和相关技术开发的动态内容和高级用户界面控件的可访问性。 您可以在以下ARIA阅读更多信息: 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的标准浏览器中打开它，您还必须看到以下输出。

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

使用图标和位置

以下示例演示了两个选项icons的用法，以及JqueryUI菜单功能中的位置。

<!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)方法可以对菜单元素执行操作，例如启用/禁用菜单。 该操作在第一个参数中指定为字符串（例如，“禁用”禁用菜单）。 请查看下表中可以传递的操作。

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No.行动和描述
1blur( [event ] )

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

Action - blur( [event ] )

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

Syntax

$(".selector").menu( "blur" );
2collapse( [event ] )

此操作将关闭当前活动的子菜单。 event的类型为Event ，表示触发菜单崩溃的内容。

Action - collapse( [event ] )

此操作将关闭当前活动的子菜单。 event的类型为Event ，表示触发菜单崩溃的内容。

Syntax

$(".selector").menu( "collapse" );
3collapseAll( [event ] [, all ] )

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

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

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

  • event属于Event类型，表示触发菜单折叠的内容

  • all是类型Boolean表示是应该关闭所有子菜单还是仅关闭下面的子菜单，包括是或包含触发事件目标的菜单。

Syntax

$(".selector").menu( "collapseAll", null, true );
4destroy()

此操作完全删除菜单功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Action - destroy()

此操作完全删除菜单功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Syntax

$(".selector").menu( "destroy" );
5disable()

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

Action - disable()

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

Syntax

$(".selector").menu( "disable" );
6enable()

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

Action - enable()

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

Syntax

$(".selector").menu( "enable" );
7expand( [event ] )

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

Action - expand( [event ] )

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

Syntax

$(".selector").menu( "expand" );
8focus( [event ], item )

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

Action - focus( [event ], item )

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

Syntax

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

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

Action - isFirstItem()

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

Syntax

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

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

Action - isLastItem()

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

Syntax

$(".selector").menu( "isLastItem" );
11next( [event ] )

此操作将活动状态委派给下一个菜单项。 event的类型为Event ，表示触发焦点移动的内容。

Action - next( [event ] )

此操作将活动状态委派给下一个菜单项。 event的类型为Event ，表示触发焦点移动的内容。

Syntax

$(".selector").menu( "next" );
12nextPage( [event ] )

此操作将活动状态移动到可滚动菜单底部下方的第一个菜单项或最后一个项目（如果不可滚动）。 event的类型为Event ，表示触发焦点移动的内容。

Action - nextPage( [event ] )

此操作将活动状态移动到可滚动菜单底部下方的第一个菜单项或最后一个项目（如果不可滚动）。 event的类型为Event ，表示触发焦点移动的内容。

Syntax

$(".selector").menu( "nextPage" );
13option( optionName )

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

Action - option( optionName )

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

Syntax

var isDisabled = $( ".selector" ).menu( "option", "disabled" );
14option()

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

Action - option()

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

Syntax

var options = $( ".selector" ).menu( "option" );
15option( optionName, value )

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

Action - option( optionName, value )

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

Syntax

$(".selector").menu( "option", "disabled", true );
16option( options )

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

Action - option( options )

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

Syntax

$(".selector").menu( "option", { disabled: true } );
17previous( [event ] )

此操作将活动状态移动到上一个菜单项。 event的类型为Event ，表示触发焦点移动的内容。

Action - previous( [event ] )

此操作将活动状态移动到上一个菜单项。 event的类型为Event ，表示触发焦点移动的内容。

Syntax

$(".selector").menu( "previous" );
18previousPage( [event ] )

此操作将活动状态移动到可滚动菜单顶部上方的第一个菜单项或第一个项目（如果不可滚动）。 event的类型为Event ，表示触发焦点移动的内容。

Action - previousPage( [event ] )

此操作将活动状态移动到可滚动菜单顶部上方的第一个菜单项或第一个项目（如果不可滚动）。 event的类型为Event ，表示触发焦点移动的内容。

Syntax

$(".selector").menu( "previousPage" );
19refresh()

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

Action - refresh()

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

Syntax

$(".selector").menu( "refresh" );
20select( [event ] )

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

Action - select( [event ] )

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

Syntax

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

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

Action - widget()

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

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的标准浏览器中打开它

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

使用焦点和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还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

Sr.No.事件方法和描述
1blur(event, ui)

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

Event - blur(event, ui)

当菜单失去焦点时会触发此事件。 where event的类型为Event ， ui的类型为Object ，表示当前活动的菜单项。

Syntax

$( ".selector" ).menu({
   blur: function( event, ui ) {}
});
2create(event, ui)

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

Event - create(event, ui)

创建菜单时会触发此事件。 其中event是Event类型， ui是Object类型。

Syntax

$( ".selector" ).menu({
   create: function( event, ui ) {}
});
3focus(event, ui)

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

Event - focus(event, ui)

菜单获得焦点或激活任何菜单项时会触发此事件。 where event的类型为Event ， ui的类型为Object ，表示当前活动的菜单项。

Syntax

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

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

Event - select(event, ui)

选择菜单项时会触发此事件。 where event的类型为Event ， ui的类型为Object ，表示当前活动的菜单项。

Syntax

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

例子 (Example)

以下示例演示了菜单小部件功能的事件方法用法。 此示例演示了事件create ， blur和focus 。

<!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的标准浏览器中打开它

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

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn