非常教程

jQuery UI 教程教程

jQuery UI API – 菜单部件(Menu Widget)

jQuery UI API – 菜单部件(Menu Widget)

jQuery UI API - 菜单部件(Menu Widget)

所属类别

小部件(Widgets)

用法

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

版本新增: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 选项来区分两个元素,例如 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:菜单项之间的分隔符元素。

依赖

  • UI 核心(UI Core)
  • 部件库(Widget Factory)
  • 定位(Position)

附加说明

  • 该部件要求一些功能性的 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>

jQuery UI API – 菜单部件(Menu Widget)
jQuery UI 教程

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题,可用于创建高度交互的 Web 应用程序。

jQuery UI 教程目录

1.jQuery UI 简介
2.jQuery UI 教程
3.jQuery UI CSS 框架 API
4.jQuery UI 主题
5.jQuery UI 工作原理
6.jQuery UI 如何使用部件库
7.jQuery UI 为什么使用部件库
8.jQuery UI 小部件方法调用
9.jQuery UI 通过部件库扩展小部件
10.jQuery UI 部件库
11.jQuery UI 设计主题
12.jQuery UI API 类别 – UI 核心
13.jQuery UI API 类别 – 主题
14.jQuery UI API 类别 – 选择器
15.jQuery UI API 类别 – 方法
16.jQuery UI API 类别 – 方法重载
17.jQuery UI API 类别 – 交互
18.jQuery UI API 类别 – 特效核心
19.jQuery UI API 类别 – 特效
20.jQuery UI API 文档
21.jQuery UI API – 颜色动画(Color Animation)
22.jQuery UI API – 剪辑特效(Clip Effect)
23.jQuery UI API – 反弹特效(Bounce Effect)
24.jQuery UI API – 百叶窗特效(Blind Effect)
25.jQuery UI API – .addClass()
26.jQuery UI 实例
27.jQuery UI API 类别 – 小部件
28.jQuery UI API 类别 – 实用工具
29.jQuery UI API – 跳动特效(Pulsate Effect)
30.jQuery UI API – 膨胀特效(Puff Effect)
31.jQuery UI API – 突出特效(Highlight Effect)
32.jQuery UI API – .hide()
33.jQuery UI API – 折叠特效(Fold Effect)
34.jQuery UI API – 淡入淡出特效(Fade Effect)
35.jQuery UI API – 爆炸特效(Explode Effect)
36.jQuery UI API – .effect()
37.jQuery UI API – Easings
38.jQuery UI API – 降落特效(Drop Effect)
39.jQuery UI API – 转移特效(Transfer Effect)
40.jQuery UI API – .toggleClass()
41.jQuery UI API – .toggle()
42.jQuery UI API – .switchClass()
43.jQuery UI API – 滑动特效(Slide Effect)
44.jQuery UI API – 尺寸特效(Size Effect)
45.jQuery UI API – .show()
46.jQuery UI API – 震动特效(Shake Effect)
47.jQuery UI API – 缩放特效(Scale Effect)
48.jQuery UI API – .removeClass()
49.jQuery UI API – 可放置小部件(Droppable Widget)
50.jQuery UI API – 可拖拽小部件(Draggable Widget)
51.jQuery UI API – .enableSelection()
52.jQuery UI API – .disableSelection()
53.jQuery UI API – .position()
54.jQuery UI API – .focus()
55.jQuery UI API – 可排序小部件(Sortable Widget)
56.jQuery UI API – 可选择小部件(Selectable Widget)
57.jQuery UI API – 可调整尺寸小部件(Resizable Widget)
58.jQuery UI API – 鼠标交互(Mouse Interaction)
59.jQuery UI API – 堆叠元素(Stacking Elements)
60.jQuery UI API – 图标(Icons)
61.jQuery UI API – CSS 框架(CSS Framework)
62.jQuery UI API – :tabbable Selector
63.jQuery UI API – :focusable Selector
64.jQuery UI API – :data() Selector
65.jQuery UI API – .zIndex()
66.jQuery UI API – .uniqueId()
67.jQuery UI API – .scrollParent()
68.jQuery UI API – .removeUniqueId()
69.jQuery UI API – 插件桥(Widget Plugin Bridge)
70.jQuery UI API – 部件库(Widget Factory)
71.jQuery UI API – jQuery.ui.keyCode
72.jQuery UI API – 滑块部件(Slider Widget)
73.jQuery UI API – 进度条部件(Progressbar Widget)
74.jQuery UI API – 菜单部件(Menu Widget)
75.jQuery UI API – 对话框部件(Dialog Widget)
76.jQuery UI API – 日期选择器部件(Datepicker Widget)
77.jQuery UI API – 按钮部件(Button Widget)
78.jQuery UI API – 自动完成部件(Autocomplete Widget)
79.jQuery UI API – 折叠面板部件(Accordion Widget)
80.jQuery UI API – 工具提示框部件(Tooltip Widget)
81.jQuery UI API – 标签页部件(Tabs Widget)
82.jQuery UI API – 旋转器部件(Spinner Widget)
83.jQuery UI 实例 – 缩放(Resizable)
84.jQuery UI 实例 – 放置(Droppable)
85.jQuery UI 实例 – 拖动(Draggable)
86.jQuery UI 实例 – 滑块(Slider)
87.jQuery UI 实例 – 进度条(Progressbar)
88.jQuery UI 实例 – 菜单(Menu)
89.jQuery UI 实例 – 对话框(Dialog)
90.jQuery UI 实例 – 日期选择器(Datepicker)
91.jQuery UI 实例 – 按钮(Button)
92.jQuery UI 实例 – 自动完成(Autocomplete)
93.jQuery UI 实例 – 折叠面板(Accordion)
94.jQuery UI 实例 – 排序(Sortable)
95.jQuery UI 实例 – 选择(Selectable)
96.jQuery UI 实例 – 切换 Class(Toggle Class)
97.jQuery UI 实例 – 移除 Class(Remove Class)
98.jQuery UI 实例 – 添加 Class(Add Class)
99.jQuery UI 实例 – 切换(Toggle)
100.jQuery UI 实例 – 隐藏(Hide)