HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

JqueryUI - 菜单小部件

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

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

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

语法

menu() 方法有两种使用方式 −

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

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

语法

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

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

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

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

序号 选项 & 说明
1 disabled

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

Option - disabled

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

语法

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

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

Option - icons

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

语法

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

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

Option - menus

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

语法

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

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

Option - position

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

语法

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

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

Option - role

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

作为 Web 可访问性倡议 (WAI) 的一部分，Accessible Rich Internet Applications Suite (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.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的菜单函数中icons和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);;

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

序号 操作 & 说明
1 blur( [event ] )

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

Action - blur( [event ] )

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

语法

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

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

Action - collapse( [event ] )

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

语法

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

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

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

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

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

  • all 属于 Boolean 类型 指示是否应关闭所有子菜单或仅关闭下面的子菜单并包括是或包含触发事件目标的菜单。

语法

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

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

Action - destroy()

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

语法

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

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

Action - disable()

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

语法

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

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

Action - enable()

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

语法

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

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

Action - expand( [event ] )

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

语法

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

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

Action - focus( [event ], item )

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

语法

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

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

Action - isFirstItem()

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

语法

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

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

Action - isLastItem()

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

语法

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

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

Action - next( [event ] )

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

语法

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

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

Action - nextPage( [event ] )

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

语法

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

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

Action - option( optionName )

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

语法

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

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

Action - option()

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

语法

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

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

Action - option( optionName, value )

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

语法

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

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

Action - option( options )

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

语法

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

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

Action - previous( [event ] )

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

语法

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

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

Action - previousPage( [event ] )

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

语法

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

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

Action - refresh()

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

语法

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

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

Action - select( [event ] )

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

语法

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

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

Action - 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.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 blur(event, ui)

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

Event - blur(event, ui)

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

语法

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

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

Event - create(event, ui)

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

语法

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

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

Event - focus(event, ui)

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

语法

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

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

Event - 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.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 的标准浏览器中打开它，您应该会看到以下输出 −

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

❮ 上一节 下一节 ❯