jQuery UI API - メニューウィジェット（Menu Widget）

所属カテゴリ

ウィジェット（Widgets）

用法

説明：マウスとキーボード操作に対応した、テーマ化可能なナビゲーションメニュー。

バージョン追加：1.9

メニューは、要素が厳密な親/子関係を持ち、各項目がアンカーを持つ限り、任意の有効なマークアップで作成できます。最も一般的な要素は順序なしリスト（<ul>）：

<ul id="menu">
  <li><a href="../index.html">Item 1</a></li>
  <li><a href="../index.html">Item 2</a></li>
  <li><a href="../index.html">Item 3</a>
    <ul>
      <li><a href="../index.html">Item 3-1</a></li>
      <li><a href="../index.html">Item 3-2</a></li>
      <li><a href="../index.html">Item 3-3</a></li>
      <li><a href="../index.html">Item 3-4</a></li>
      <li><a href="../index.html">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="../index.html">Item 4</a></li>
  <li><a href="../index.html">Item 5</a></li>
</ul>

非（<ul>）<ul>/<li>の構造の場合、メニューとメニュー項目に同じ要素を使用するには、menusオプションを使用して2つの要素を区別します。例えばmenus: "div.menuElement"。

要素にui-state-disabledclass を追加することで、任意のメニュー項目を無効にできます。

アイコン

メニューにアイコンを追加するには、マークアップにアイコンを含めます：

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

メニュー（Menu）は、アイコンのない項目に必要なパディングを自動的に追加します。

セパレータ

セパレータ要素は、リンクされていないメニュー項目を含めることで作成できます。そのメニュー項目はスペースまたはダッシュのみで構成されます：

<ul id="menu">
  <li><a href="../index.html">Item 1</a></li>
  <li>-</li>
  <li><a href="../index.html">Item 2</a></li>
</ul>

キーボード操作

  • ENTER/SPACE：フォーカスされているメニュー項目のアクションを呼び出し、サブメニューを開く場合があります。
  • UP：フォーカスを前のメニュー項目に移動します。
  • DOWN：フォーカスを次のメニュー項目に移動します。
  • RIGHT：可能であれば、サブメニューを開きます。
  • LEFT：現在のサブメニューを閉じ、フォーカスを親メニュー項目に移動します。フォーカスがサブメニューにない場合は、何も行いません。
  • ESCAPE：現在のサブメニューを閉じ、フォーカスを親メニュー項目に移動します。フォーカスがサブメニューにない場合は、何も行いません。

文字を入力すると、その文字で始まる最初の項目にフォーカスが移動します。同じ文字を繰り返すと、一致する項目が循環表示されます。短時間にさらに文字を入力すると、入力された文字列に一致します。

無効な項目はキーボードフォーカスを取得できますが、操作は一切許可されません。

テーマ化

メニューウィジェット（Menu Widget）はjQuery UI CSS フレームワークを使用して、その外観と操作感のスタイルを定義します。メニュー固有のスタイルを使用する必要がある場合は、以下の CSS クラス名を使用できます：

  • ui-menu：メニューの外側のコンテナ。メニューにアイコンが含まれる場合、この要素にはさらにui-menu-icons class。
    • ui-menu-item：単一のメニュー項目のコンテナ。
      • ui-menu-icon：を介してiconsオプションを使用してサブメニューアイコンを設定します。
    • ui-menu-divider：メニュー項目間のセパレータ要素。

依存関係

補足説明

  • このウィジェットは機能的な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="../index.html">Item 1</a></li>
  <li><a href="../index.html">Item 2</a></li>
  <li><a href="../index.html">Item 3</a>
    <ul>
      <li><a href="../index.html">Item 3-1</a></li>
      <li><a href="../index.html">Item 3-2</a></li>
      <li><a href="../index.html">Item 3-3</a></li>
      <li><a href="../index.html">Item 3-4</a></li>
      <li><a href="../index.html">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="../index.html">Item 4</a></li>
  <li><a href="../index.html">Item 5</a></li>
</ul>
 
<script>
$( "#menu" ).menu();
</script>
 
</body>
</html>

その他の拡張機能