菜单部件(Menu Widget)

收藏:0   阅读:27

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-disabledclass 来禁用任何菜单条目。

图标

为了向菜单添加图标,请在标记中包含图标:

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

键盘交互

输入一个字母,移动焦点到以该字母开头的第一个条目。重复相同的字符会循环显示匹配的条目。在一个时间内输入更多的字符则匹配所输入的字符。

禁用项可获得键盘焦点,但是不允许任何交互。

主题化

菜单部件(Menu Widget)使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用菜单指定的样式,则可以使用下面的 CSS class 名称:

依赖

附加说明

实例

一个简单的 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>
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!