jQuery UI （18）菜单部件（Menu Widget）

转载

mob604756eae43b 2020-03-16 14:08:00

文章标签 菜单项子菜单 ico jquery 初始化 文章分类 代码人生

带有鼠标和键盘交互的用于导航的可主题化菜单。

实例

一个简单的 jQuery UI 菜单（Menu）。

jQuery UI （18）菜单部件（Menu Widget）_初始化

代码

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

查看演示

菜单可以用任何有效的标记创建，只要元素有严格的父/子关系且每个条目都有一个锚。最常用的元素是无序列表ul：

如果使用一个非 <ul>/<li> 的结构，为菜单和菜单条目使用相同的元素，请使用 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 框架来定义它的外观和感观的样式。如果需要使用菜单指定的样式，则可以使用下面的 CSS class 名称：

ui-menu：菜单的外层容器。如果菜单包含图标，该元素会另外带有一个 ui-menu-icons class。
- ui-menu-item：单个菜单项的容器。
- - ui-menu-icon：通过 icons 选项进行子菜单图标设置。
- ui-menu-divider：菜单项之间的分隔符元素。

六、快速导航

1、Options

disabled：如果设置为 true，则禁用该 menu（菜单）。
icons：标题要使用的图标，与 jQuery UI CSS 框架提供的图标（Icons）匹配。设置为 false 则不显示图标。
menus：作为menu（菜单）容器的元素的选择器，包括子菜单。
position：标识建议菜单的位置与相关的 input 元素有关系。of 选项默认为 input 元素，但是您可以指定另一个定位元素。
role：自定义用于菜单和菜单项的ARIA roles（注：关于ARIA roles）。在默认情况下菜单项使用"menuitem"。设置role选项为了使"listbox"使用"option"作为菜单项。如果设置为null，没有roles将被设置，如果菜单是由被保持焦点另一个元件控制时候，非常有用。

2、Methods

blur()：从菜单中删除焦点，重置任何激活样式和触发菜单的 blur 事件。
collapse()：关闭当前活动的子菜单。
collapseAll()：关闭全部打开的子菜单。
destroy()：完全移除 menu 功能. 这将使元素返回到之前的初始化状态.
disable()：禁用 menu.
enable()：启用 menu.
expand()：打开当前活动项目下的子菜单下，如果有的话。
focus()：激活一个特定的菜单项，首先，如果打开存在的任何子菜单，并触发菜单的focus事件。
isFirstItem()：返回一个布尔值，说明当前活动项目是否菜单的第一项。
isLastItem()：返回一个布尔值，说明当前活动项目是否菜单的最后一项。
next()：移动激活状态到下一个菜单项。
nextPage()：移动激活状态到第一个菜单项下的可滚动菜单的底部，或最后一个项目，如果不可滚动。
option()：
previous()：移动激活状态到上一个菜单项。
previousPage()：移动激活状态到第一个菜单项下的可滚动菜单的顶部，或第一一个项目，如果不可滚动。
refresh()：初始化还没有被初始化的子菜单和菜单项。新的菜单项，包括子菜单可以被添加到菜单或所有的菜单的内容可以被替换然后使用refresh()方法初始化。
select()：选择当前活动的菜单项，折叠所有子菜单并触发菜单中的 select 事件。
widget()：返回一个包含 button 的 jQuery 对象。