JqueryUI - 菜单小部件

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

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

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

语法

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

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

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

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

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

默认功能

以下示例演示了菜单小部件功能的一个简单示例，不向 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操作 −

$(".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" );

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

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 还提供了针对特定事件触发的事件方法。 下面列出了这些事件方法 −

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

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

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

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

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