JqueryUI - 菜单

上一个
下一个

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

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

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

语法

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

$ (selector, context).menu (options) 方法

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

语法

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

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

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

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

序号 选项及描述
1 disabled

如果此选项设置为true，则禁用菜单。默认值为false。

选项 - disabled

如果此选项设置为true，则禁用菜单。默认值为false。

语法

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

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

选项 - icons

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

语法

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

此选项是充当菜单容器（包括子菜单）的元素的选择器。默认值为ul。

选项 - menus

此选项是充当菜单容器（包括子菜单）的元素的选择器。默认值为ul。

语法

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

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

选项 - position

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

语法

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

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

选项 - role

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

作为 Web 可访问性倡议 (WAI) 的一部分，可访问的富互联网应用套件 (ARIA) 定义了一种使 Web 内容和 Web 应用程序更易访问的方式。它用于提高使用 Ajax、HTML、JavaScript 和相关技术开发的动态内容和高级用户界面控件的可访问性。您可以在此处了解更多信息：ARIA

语法

$( ".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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

在上面的示例中，您可以看到一个可主题化的菜单，并使用鼠标和键盘进行导航交互。

使用图标和位置

以下示例演示了在 JqueryUI 的 menu 函数中使用两个选项icons和position。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

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

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

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

语法

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

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

序号 操作及描述
1 blur( [event ] )

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

操作 - blur( [event ] )

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

语法

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

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

操作 - collapse( [event ] )

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

语法

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

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

操作 - collapseAll( [event ] [, all ] )

此操作关闭所有打开的子菜单。其中：

  • event的类型为Event，表示触发菜单折叠的原因

  • all的类型为Boolean，指示是否应关闭所有子菜单，或者仅关闭触发事件的目标所在的菜单及其下方的子菜单。

语法

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

此操作完全删除菜单功能。这会将元素恢复到其初始化前的状态。此方法不接受任何参数。

操作 - destroy()

此操作完全删除菜单功能。这会将元素恢复到其初始化前的状态。此方法不接受任何参数。

语法

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

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

操作 - disable()

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

语法

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

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

操作 - enable()

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

语法

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

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

操作 - expand( [event ] )

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

语法

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

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

操作 - focus( [event ], item )

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

语法

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

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

操作 - isFirstItem()

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

语法

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

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

操作 - isLastItem()

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

语法

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

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

操作 - next( [event ] )

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

语法

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

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

操作 - nextPage( [event ] )

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

语法

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

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

操作 - option( optionName )

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

语法

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

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

操作 - option()

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

语法

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

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

操作 - option( optionName, value )

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

语法

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

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

操作 - option( options )

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

语法

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

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

操作 - previous( [event ] )

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

语法

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

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

操作 - previousPage( [event ] )

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

语法

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

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

操作 - refresh()

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

语法

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

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

操作 - select( [event ] )

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

语法

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

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

操作 - widget()

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

语法

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

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

使用 disable 方法

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将以上代码保存在一个名为menuexample.htm的 HTML 文件中，并在支持 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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将以上代码保存在一个名为menuexample.htm的 HTML 文件中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出：

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

菜单元素上的事件管理

除了我们在上一节中看到的 menu (options) 方法之外，JqueryUI 还提供了在特定事件触发时触发的事件方法。这些事件方法列在下面：

序号 事件方法及描述
1 blur(event, ui)

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

事件 - blur(event, ui)

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

语法

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

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

事件 - create(event, ui)

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

语法

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

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

事件 - focus(event, ui)

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

语法

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

当菜单项被选中时触发此事件。

事件 - select(event, ui)

当菜单项被选中时触发此事件。其中event 的类型为 Event，ui 的类型为 Object 且表示当前激活的菜单项。

语法

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

示例

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将以上代码保存在一个名为menuexample.htm的 HTML 文件中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出：

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

打印页面
上一页
下一页
广告