JqueryUI教程

JqueryUI - 菜单

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

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

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

语法

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

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

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

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

语法

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

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

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

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


 
 $(".selector").menu(
 {disabled:true} 
);
 
 $(".selector").menu(
 {icons:{submenu:"ui-icon-circle-triangle-e"} } 
);
 
 $(".selector").menu(
 {menus:"div"} 
);
 
 $(".selector").menu(
 {position:{my:"left top"，at:"right-5 top +5"}} 
);
 
 $(".selector").menu(
 {role:null} 
);

Sr.No.	选项&描述
1	disabled 如果设置为 true ，则此选项会禁用菜单.默认情况下，其值为 false . 选项 - 已停用此选项如果设置为 true ，则禁用菜单.默认情况下，其值为 false . 语法 $(".selector").menu( {disabled:true} );
2	icons 此选项设置子菜单的图标.默认情况下，其值为 {submenu:"ui-icon-carat-1-e"} . 选项 - 图标此选项设置子菜单的图标.默认情况下，其值为 {submenu:"ui-icon-carat-1-e"} . 语法 $(".selector").menu( {icons:{submenu:"ui-icon-circle-triangle-e"} } );
3	menus 此选项是用作菜单容器的元素的选择器，包括子菜单.默认情况下，其值为 ul . 选项 - 菜单此选项是用作菜单容器的元素的选择器，包括子菜单.默认情况下，其值为 ul . 语法 $(".selector").menu( {menus:"div"} );
4	position 此选项设置子菜单相对于关联的父菜单项的位置.默认情况下，其值为 {my:"left top"，at:"right top"} . 选项 - 位置此选项设置子菜单相对于关联父菜单项的位置.默认情况下，其值为 {my:"left top"，at:"right top"} . 语法 $(".selector").menu( {position:{my:"left top"，at:"right-5 top +5"}} );
5	role 此选项用于自定义用于菜单和菜单项的ARIA角色.默认情况下，其值为菜单. 选项 - 角色此选项用于自定义用于菜单和菜单项的ARIA角色.默认情况下，其值为 menu . 作为Web可访问性计划(WAI)的一部分，可访问富Internet应用程序套件(ARIA)定义了一种方法使Web内容和Web应用程序更易于访问.它用于改进使用Ajax，HTML，JavaScript和相关技术开发的动态内容和高级用户界面控件的可访问性. 语法 $(".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菜单功能中的位置.

<!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);;

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


$(".selector").menu( "blur" );
$(".selector").menu( "collapse" );
$(".selector").menu( "collapseAll", null, true );
$(".selector").menu( "destroy" );
$(".selector").menu( "disable" );
$(".selector").menu( "enable" );
$(".selector").menu( "expand" );
$(".selector").menu( "focus", null, menu.find( ".ui-menu-item:last" ) );
$(".selector").menu( "isFirstItem" );
$(".selector").menu( "isLastItem" );
$(".selector").menu( "next" );
$(".selector").menu( "nextPage" );
var isDisabled = $( ".selector" ).menu( "option", "disabled" );
var options = $( ".selector" ).menu( "option" );
$(".selector").menu( "option", "disabled", true );
$(".selector").menu( "option", { disabled: true } );
$(".selector").menu( "previous" );
$(".selector").menu( "previousPage" );
$(".selector").menu( "refresh" );
$(".selector").menu( "select" );
$(".selector").menu( "widget" );

Sr.No.	Action & Description
1	blur( [event ] ) 此操作会从菜单中删除焦点. 它通过重置任何活动元素样式来触发菜单的模糊事件. 事件的类型为Event，表示触发菜单模糊的内容. Action - blur( [event ] ) 此操作会从菜单中删除焦点. 它通过重置任何活动元素样式来触发菜单的模糊事件. 事件的类型为Event，表示触发菜单模糊的内容. Syntax $(".selector").menu( "blur" );
2	collapse( [event ] ) 此操作将关闭当前活动的子菜单. 事件的类型为Event，表示触发菜单崩溃的内容. Action - collapse( [event ] ) 此操作将关闭当前活动的子菜单. 事件的类型为Event，表示触发菜单崩溃的内容. Syntax $(".selector").menu( "collapse" );
3	collapseAll( [event ] [, all ] ) 此操作将关闭所有打开的子菜单. Action - collapseAll( [event ] [, all ] ) 此操作将关闭所有打开的子菜单. event 是Event类型，表示触发菜单折叠的内容 all 是Boolean类型指示是应关闭所有子菜单还是仅关闭下面的子菜单，包括是或包含触发事件目标的菜单. Syntax $(".selector").menu( "collapseAll", null, true );
4	destroy() 此操作完全删除菜单功能. 这将使元素返回到其初始化前状态. 此方法不接受任何参数. Action - destroy() 此操作完全删除菜单功能. 这将使元素返回到其初始化前状态. 此方法不接受任何参数. Syntax $(".selector").menu( "destroy" );
5	disable() 此操作会禁用菜单. 此方法不接受任何参数. Action - disable() 此操作会禁用菜单. 此方法不接受任何参数. Syntax $(".selector").menu( "disable" );
6	enable() 此操作启用菜单. 此方法不接受任何参数. Action - enable() 此操作启用菜单. 此方法不接受任何参数. Syntax $(".selector").menu( "enable" );
7	expand( [event ] ) 此操作将打开当前活动项目下方的子菜单(如果存在). 其中event是Event类型，表示触发菜单扩展的内容. Action - expand( [event ] ) 此操作将打开当前活动项目下方的子菜单(如果存在). 其中event是Event类型，表示触发菜单扩展的内容. Syntax $(".selector").menu( "expand" );
8	focus( [event ], item ) 此操作激活特定菜单项，开始打开任何子菜单(如果存在)并触发菜单的焦点事件. 事件的类型为Event，表示触发菜单获取焦点的内容. 和item是一个jQuery对象，表示要聚焦/激活的菜单项. Action - focus( [event ], item ) 此操作激活特定菜单项，开始打开任何子菜单(如果存在)并触发菜单的焦点事件. 事件的类型为Event，表示触发菜单获取焦点的内容. 和item是一个jQuery对象，表示要聚焦/激活的菜单项. Syntax $(".selector").menu( "focus", null, menu.find( ".ui-menu-item:last" ) );
9	isFirstItem() 此操作返回一个布尔值，该值指出当前活动菜单项是否是第一个菜单项. 此方法不接受任何参数. Action - isFirstItem() 此操作返回一个布尔值，该值指出当前活动菜单项是否是第一个菜单项. 此方法不接受任何参数. Syntax $(".selector").menu( "isFirstItem" );
10	isLastItem() 此操作返回一个布尔值，该值指出当前活动菜单项是否是最后一个菜单项. 此方法不接受任何参数. Action - isLastItem() 此操作返回一个布尔值，该值指出当前活动菜单项是否是最后一个菜单项. 此方法不接受任何参数. Syntax $(".selector").menu( "isLastItem" );
11	next( [event ] ) 此操作将活动状态委派给下一个菜单项. 事件的类型为Event，表示触发焦点移动的内容. Action - next( [event ] ) 此操作将活动状态委派给下一个菜单项. 事件的类型为Event，表示触发焦点移动的内容. Syntax $(".selector").menu( "next" );
12	nextPage( [event ] ) 此操作将活动状态移动到可滚动菜单底部下方的第一个菜单项或最后一个项目(如果不可滚动). 事件的类型为Event，表示触发焦点移动的内容. Action - nextPage( [event ] ) 此操作将活动状态移动到可滚动菜单底部下方的第一个菜单项或最后一个项目(如果不可滚动). 事件的类型为Event，表示触发焦点移动的内容. Syntax $(".selector").menu( "nextPage" );
13	option( optionName ) 此操作获取当前与指定的optionName关联的值. 其中optionName的类型为String，表示要获取的选项的名称. Action - option( optionName ) 此操作获取当前与指定的optionName关联的值. 其中optionName的类型为String，表示要获取的选项的名称. Syntax var isDisabled = $( ".selector" ).menu( "option", "disabled" );
14	option() 此操作获取一个对象，其中包含表示当前菜单选项哈希的键/值对. Action - option() 此操作获取一个对象，其中包含表示当前菜单选项哈希的键/值对. Syntax var options = $( ".selector" ).menu( "option" );
15	option( optionName, value ) 此操作设置与指定的optionName关联的菜单选项的值. 其中optionName的类型为String，表示要设置的选项的名称，value的类型为Object，表示要为该选项设置的值. Action - option( optionName, value ) 此操作设置与指定的optionName关联的菜单选项的值. 其中optionName的类型为String，表示要设置的选项的名称，value的类型为Object，表示要为该选项设置的值. Syntax $(".selector").menu( "option", "disabled", true );
16	option( options ) 此操作为菜单设置一个或多个选项. 其中options是Object类型，表示要设置的选项 - 值对的映射. Action - option( options ) 此操作为菜单设置一个或多个选项. 其中options是Object类型，表示要设置的选项 - 值对的映射. Syntax $(".selector").menu( "option", { disabled: true } );
17	previous( [event ] ) 此操作将活动状态移动到上一个菜单项. 事件的类型为Event，表示触发焦点移动的内容. Action - previous( [event ] ) 此操作将活动状态移动到上一个菜单项. 事件的类型为Event，表示触发焦点移动的内容. Syntax $(".selector").menu( "previous" );
18	previousPage( [event ] ) 此操作将活动状态移动到可滚动菜单顶部上方的第一个菜单项或第一个项目(如果不可滚动). 事件的类型为Event，表示触发焦点移动的内容. Action - previousPage( [event ] ) 此操作将活动状态移动到可滚动菜单顶部上方的第一个菜单项或第一个项目(如果不可滚动). 事件的类型为Event，表示触发焦点移动的内容. Syntax $(".selector").menu( "previousPage" );
19	refresh() 此操作初始化尚未初始化的子菜单和菜单项. 此方法不接受任何参数. Action - refresh() T此操作初始化尚未初始化的子菜单和菜单项. 此方法不接受任何参数. Syntax $(".selector").menu( "refresh" );
20	select( [event ] ) 此操作选择当前活动的菜单项，折叠所有子菜单并触发菜单的选择事件. 事件的类型为Event，表示触发选择的内容. Action - select( [event ] ) 此操作选择当前活动的菜单项，折叠所有子菜单并触发菜单的选择事件. 事件的类型为Event，表示触发选择的内容. Syntax $(".selector").menu( "select" );
21	widget() 此操作返回包含菜单的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.	Event Method & Description
1	blur(event, ui) 当菜单失去焦点时会触发此事件. Event - blur(event, ui) 当菜单失去焦点时会触发此事件. where事件的类型为Event，ui的类型为Object，表示当前活动的菜单项. Syntax $( ".selector" ).menu({ blur: function( event, ui ) {} });
2	create(event, ui) 创建菜单时会触发此事件. Event - create(event, ui) 创建菜单时会触发此事件. 其中event是Event类型，ui是Object类型. Syntax $( ".selector" ).menu({ create: function( event, ui ) {} });
3	focus(event, ui) 菜单获得焦点或激活任何菜单项时会触发此事件. Event - focus(event, ui) 菜单获得焦点或激活任何菜单项时会触发此事件. where事件的类型为Event，ui的类型为Object，表示当前活动的菜单项. Syntax $( ".selector" ).menu({ focus: function( event, ui ) {} });
4	select(event, ui) 选择菜单项时会触发此事件. Event - select(event, ui) 选择菜单项时会触发此事件. where事件的类型为Event，ui的类型为Object，表示当前活动的菜单项. 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的标准浏览器中打开它，你还必须看到以下输出

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