jQuery UI API - 菜單部件（Menu Widget） · W3School jQuery UI 教程

# jQuery UI API - 菜單部件（Menu Widget） ## 所屬類別 [小部件（Widgets）](ref-widgets.html) ## 用法 **描述：**帶有鼠標和鍵盤交互的用于導航的可主題化菜單。 **版本新增：**1.9 菜單可以用任何有效的標記創建，只要元素有嚴格的父/子關系且每個條目都有一個錨。最常用的元素是無序列表（`<ul>`）： ``` <ul id="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Item 3-1</a></li> <li><a href="#">Item 3-2</a></li> <li><a href="#">Item 3-3</a></li> <li><a href="#">Item 3-4</a></li> <li><a href="#">Item 3-5</a></li> </ul> </li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> ``` 如果使用一個非 `<ul>`/`<li>` 的結構，為菜單和菜單條目使用相同的元素，請使用 [`menus`](#option-menus) 選項來區分兩個元素，例如 `menus: "div.menuElement"`。可通過向元素添加 `ui-state-disabled` class 來禁用任何菜單條目。 ### 圖標為了向菜單添加圖標，請在標記中包含圖標： ``` <ul id="menu"> <li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li> </ul> ``` 菜單（Menu）會自動向無圖標的條目添加必要的內邊距。 ### 分隔符分隔符元素可通過包含未鏈接的菜單條目來創建，菜單條目只能是空格/破折號： ``` <ul id="menu"> <li><a href="#">Item 1</a></li> <li>-</li> <li><a href="#">Item 2</a></li> </ul> ``` ### 鍵盤交互 * ENTER/SPACE：調用獲得焦點的菜單項的動作，可能會打開一個子菜單。 * UP：移動教導到上一個菜單項。 * DOWN：移動教導到下一個菜單項。 * RIGHT：如果可用，則打開子菜單。 * LEFT：關閉當前子菜單，移動焦點到父菜單項。如果焦點不在子菜單上，則不進行任何操作。 * ESCAPE：關閉當前子菜單，移動焦點到父菜單項。如果焦點不在子菜單上，則不進行任何操作。輸入一個字母，移動焦點到以該字母開頭的第一個條目。重復相同的字符會循環顯示匹配的條目。在一個時間內輸入更多的字符則匹配所輸入的字符。禁用項可獲得鍵盤焦點，但是不允許任何交互。 ### 主題化菜單部件（Menu Widget）使用 [jQuery UI CSS 框架](api-css-framework.html) 來定義它的外觀和感觀的樣式。如果需要使用菜單指定的樣式，則可以使用下面的 CSS class 名稱： * `ui-menu`：菜單的外層容器。如果菜單包含圖標，該元素會另外帶有一個 `ui-menu-icons` class。 * `ui-menu-item`：單個菜單項的容器。 * `ui-menu-icon`：通過 [`icons`](#option-icons) 選項進行子菜單圖標設置。 * `ui-menu-divider`：菜單項之間的分隔符元素。 ### 依賴 * [UI 核心（UI Core）](ref-ui-core.html) * [部件庫（Widget Factory）](api-jQuery-widget.html) * [定位（Position）](api-position.html) ### 附加說明 * 該部件要求一些功能性的 CSS，否則將無法工作。如果您創建了一個自定義的主題，請使用小部件指定的 CSS 文件作為起點。 ## 實例一個簡單的 jQuery UI 菜單（Menu）。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>菜單部件（Menu Widget）演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> .ui-menu { width: 200px; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <ul id="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Item 3-1</a></li> <li><a href="#">Item 3-2</a></li> <li><a href="#">Item 3-3</a></li> <li><a href="#">Item 3-4</a></li> <li><a href="#">Item 3-5</a></li> </ul> </li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> <script> $( "#menu" ).menu(); </script> </body> </html> ```