jQuery UI API - 菜單部件（Menu Widget）

所屬類別

小部件（Widgets）

用法

描述：帶有鼠標(biāo)和鍵盤交互的用于導(dǎo)航的可主題化菜單。

版本新增：1.9

菜單可以用任何有效的標(biāo)記創(chuàng)建，只要元素有嚴(yán)格的父/子關(guān)系且每個(gè)條目都有一個(gè)錨。最常用的元素是無序列表（<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>

如果使用一個(gè)非 <ul>/<li> 的結(jié)構(gòu)，為菜單和菜單條目使用相同的元素，請使用 menus 選項(xiàng)來區(qū)分兩個(gè)元素，例如 menus: "div.menuElement"。

可通過向元素添加 ui-state-disabled class 來禁用任何菜單條目。

圖標(biāo)

為了向菜單添加圖標(biāo)，請?jiān)跇?biāo)記中包含圖標(biāo)：

<ul id="menu">
  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li>
</ul>

菜單（Menu）會(huì)自動(dòng)向無圖標(biāo)的條目添加必要的內(nèi)邊距。

分隔符

分隔符元素可通過包含未鏈接的菜單條目來創(chuàng)建，菜單條目只能是空格/破折號：

<ul id="menu">
  <li><a href="#">Item 1</a></li>
  <li>-</li>
  <li><a href="#">Item 2</a></li>
</ul>

鍵盤交互

  • ENTER/SPACE：調(diào)用獲得焦點(diǎn)的菜單項(xiàng)的動(dòng)作，可能會(huì)打開一個(gè)子菜單。
  • UP：移動(dòng)教導(dǎo)到上一個(gè)菜單項(xiàng)。
  • DOWN：移動(dòng)教導(dǎo)到下一個(gè)菜單項(xiàng)。
  • RIGHT：如果可用，則打開子菜單。
  • LEFT：關(guān)閉當(dāng)前子菜單，移動(dòng)焦點(diǎn)到父菜單項(xiàng)。如果焦點(diǎn)不在子菜單上，則不進(jìn)行任何操作。
  • ESCAPE：關(guān)閉當(dāng)前子菜單，移動(dòng)焦點(diǎn)到父菜單項(xiàng)。如果焦點(diǎn)不在子菜單上，則不進(jìn)行任何操作。

輸入一個(gè)字母，移動(dòng)焦點(diǎn)到以該字母開頭的第一個(gè)條目。重復(fù)相同的字符會(huì)循環(huán)顯示匹配的條目。在一個(gè)時(shí)間內(nèi)輸入更多的字符則匹配所輸入的字符。

禁用項(xiàng)可獲得鍵盤焦點(diǎn)，但是不允許任何交互。

主題化

菜單部件（Menu Widget）使用 jQuery UI CSS 框架 來定義它的外觀和感觀的樣式。如果需要使用菜單指定的樣式，則可以使用下面的 CSS class 名稱：

  • ui-menu：菜單的外層容器。如果菜單包含圖標(biāo)，該元素會(huì)另外帶有一個(gè) ui-menu-icons class。
    • ui-menu-item：單個(gè)菜單項(xiàng)的容器。
      • ui-menu-icon：通過 icons 選項(xiàng)進(jìn)行子菜單圖標(biāo)設(shè)置。
    • ui-menu-divider：菜單項(xiàng)之間的分隔符元素。

依賴

附加說明

  • 該部件要求一些功能性的 CSS，否則將無法工作。如果您創(chuàng)建了一個(gè)自定義的主題，請使用小部件指定的 CSS 文件作為起點(diǎn)。

實(shí)例

一個(gè)簡單的 jQuery UI 菜單（Menu）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>菜單部件（Menu Widget）演示</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank" >
  <style>
  .ui-menu {
    width: 200px;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></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>

查看演示