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