jQuery UI Menu

jQuery UI Menu

jQuery UI Menu 小部件由带有弹出菜单的主菜单栏组成。弹出菜单中的某些项目还具有子弹出菜单。只要维护父子关系,就可以通过使用标记元素来创建这些菜单。
jQuery UI使用menu()方法创建菜单。
语法:
您可以使用menu()方法有两种形式。
 $(selector, context).menu(options)
 $(selector, context).menu("action", params)

第一个方法

menu(options)方法指定HTML元素及其内容应作为菜单对待和管理。这里的options参数是一个对象,用于指定所涉及菜单项的外观和行为。
语法:
 $(selector, context).menu(options);
您可以使用JavaScript对象同时使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:
 $(selector, context).menu({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表。
选项 说明
disabled 如果将此选项设置为true,它将禁用菜单。默认情况下,其值为false。
icons 此选项设置子菜单的图标。默认情况下,其值为{子菜单: " ui-icon-carat-1-e"}。
menus 此选项是用作菜单容器的元素(包括子菜单)的选择器。默认情况下,其值为ul。
position 此选项设置子菜单相对于关联的父菜单项的位置。默认情况下,其值为{my: " left top",at: " right top"}。
role 此选项用于自定义用于菜单和菜单项的aria角色。默认情况下,其值为菜单。

jQueryUI菜单示例1

让我们以一个简单的示例来演示菜单小部件的功能,不将任何参数传递给menu()方法。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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="#">C</a></li>
         <li><a href="#">C++</a></li>
         <li><a href="#">Java</a>
            <ul>
               <li><a href="#">Core Java</a></li>
               <li><a href="#">J2EE</a></li>
               <li><a href="#">Spring</a></li>
               <li><a href="#">Hibernate</a></li>
               <li><a href="#">Struts</a></li>
            </ul>
         </li>
         <li><a href="#">JSF</a></li>
         <li><a href="#">HTML5</a></li>
      </ul>
   </body>
</html>

jQuery UI Menu()示例2

图标和位置的使用:
让我们以一个示例来演示jQuery UI主要功能中两个选项图标的使用和位置。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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="#">C</a></li>
         <li><a href="#">C++</a></li>
         <li><a href="#">Java</a>
            <ul>
               <li><a href="#">Core Java IO</a></li>
               <li><a href="#">J2EE</a></li>
               <li><a href="#">Spring</a></li>
                <li><a href="#">Hibernate</a></li>
                 <li><a href="#">Struts</a></li>
            </ul>
         </li>
         <li><a href="#">JSF</a></li>
         <li><a href="#">HTML5</a></li>
      </ul>
   </body>
</html>

第二种方法

menu({option1: value1, option2: value2..... })方法用于对菜单元素执行操作,例如启用/禁用菜单。该操作在第一个参数中指定为字符串(例如," disable"禁用菜单)。在下表中检查可以通过的操作。
语法:
 $(selector, context).menu ("action", params);
以下是可与该方法一起使用的不同操作的列表。
动作 说明
blur([event]) 此操作将从菜单上移开焦点。它通过重置任何活动元素样式来触发菜单的模糊事件。这里的事件属于事件类型,代表触发菜单模糊的原因。
collapse([event]) 此操作将关闭当前活动的子菜单。这里的事件属于事件类型,代表触发菜单崩溃的原因。
collapseall([event] [,all]) 此操作将关闭所有打开的子菜单。
destroy() 此操作将完全删除菜单功能。这将使元素返回其初始状态。此方法不接受任何参数。
disable() 此操作将禁用菜单。此方法不接受任何参数。
enable() 此操作用于启用菜单。此方法不接受任何参数。
expand([event]) (如果存在)此操作用于打开当前活动项目下方的子菜单。这里的事件属于事件类型,表示触发菜单展开的原因。
focus([​​event],item 此操作将激活特定的菜单项,如果存在子菜单,则开始打开该菜单并触发菜单的焦点事件。这里的事件是事件类型的事件,代表触发菜单获取焦点的事件,而item是表示菜单项要聚焦/激活的jQuery对象。
isFirstItem() 此操作返回一个布尔值,该值指示当前活动菜单项是否是第一个菜单项。此方法不接受任何参数。
isLastItem() 此操作返回一个布尔值,该值指示当前活动菜单项是否为最后一个菜单项。此方法不接受任何参数。
Next([event]) 此操作将活动状态委托给下一个菜单项。这里的事件属于事件类型,表示触发焦点移动的原因。
Nextpage([event]) 此操作将活动状态移至可滚动菜单底部下方的第一个菜单项,如果不可滚动,则将最后一个菜单项移至最后一个菜单项。这里的事件属于事件类型,表示触发焦点移动的原因。
option(optionName) 此操作获取当前与指定的optionName关联的值。这里的optionName是字符串类型,表示要获取的选项的名称。
option() 此操作获取一个对象,该对象包含表示当前菜单选项哈希的键/值对。
option(optionName,value) 此操作设置与指定的optionName关联的菜单选项的值。这里的optionName是字符串类型,代表要设置的选项名称,value是对象类型,代表要为选项设置的值。
option(options) 此操作为菜单设置一个或多个选项。这里的options是object类型,代表要设置的option-value对的映射。
previous([event]) 此操作将活动状态移至上一个菜单项。这里的事件属于事件类型,表示触发焦点移动的原因。
previouspage([event]) 此操作将活动状态移至可滚动菜单顶部上方的第一个菜单项,如果不可滚动,则将其移至第一项。这里的事件属于事件类型,表示触发焦点移动的原因。
refresh() 此操作将初始化尚未初始化的子菜单和菜单项。此方法不接受任何参数。
select([event]) 此操作将选择当前活动的菜单项,折叠所有子菜单并触发菜单的选择事件。这里的事件属于事件类型,表示触发选择的原因。
widget() 此操作返回一个包含菜单的jQuery对象。此方法不接受任何参数。

jQueryUI Menu()示例3

使用focus和collapseAll方法:
让我们举一个例子演示使用焦点和折叠全部方法。
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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="#">C</a></li>
         <li><a href="#">C++</a></li>
         <li><a href="#">JSF</a></li>
         <li><a href="#">HTML5</a></li>
         <li><a href="#">Java</a>
            <ul>
               <li><a href="#">Core Java</a></li>
               <li><a href="#">J2EE</a></li>
               <li><a href="#">Spring</a></li>
               <li><a href="#">Hibernate</a></li>
               <li><a href="#">Struts</a></li>
       </ul>
         </li>
      </ul>
   </body>
</html>