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.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>

讓我們將以上程式碼儲存在一個名為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.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>

讓我們將以上程式碼儲存在一個名為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.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>

讓我們將以上程式碼儲存在一個名為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.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>

讓我們將以上程式碼儲存在一個名為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.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>

讓我們將以上程式碼儲存在一個名為menuexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出：

在以上示例中，我們根據觸發的事件列印訊息。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.