菜单小组件

只要元素具有严格的父/子关系，就可以从任何有效的标记创建菜单。最常用的元素是无序列表 (<ul>)。此外，每个菜单项的内容必须用块级 DOM 元素进行包装。在下面的示例中，<div> 元素用作包装器

<ul id="menu">
  <li>
    <div>Item 1</div>
  </li>
  <li>
    <div>Item 2</div>
  </li>
  <li>
    <div>Item 3</div>
    <ul>
      <li>
        <div>Item 3-1</div>
      </li>
      <li>
        <div>Item 3-2</div>
      </li>
      <li>
        <div>Item 3-3</div>
      </li>
    </ul>
  </li>
  <li>
    <div>Item 4</div>
  </li>
  <li>
    <div>Item 5</div>
  </li>
</ul>

如果你使用 <ul>/<li> 以外的结构，包括对菜单和菜单项使用相同的元素，请使用 menus 选项指定区分这两个元素的方法，例如，menus: "div.menuElement"。

可以通过向该元素添加 ui-state-disabled 类来禁用任何菜单项。

图标

要向菜单添加图标，请将它们包含在标记中

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

菜单会自动为没有图标的项目添加必要的填充。

分隔符

可以通过包含仅包含空格和/或破折号的菜单项来创建分隔符元素

<ul id="menu">
  <li>
    <div>Item 1</div>
  </li>
  <li>-</li>
  <li>
    <div>Item 2</div>
  </li>
</ul>

键盘交互

• ENTER/SPACE：调用聚焦菜单项的操作，这可能会打开子菜单。
• UP：将焦点移动到上一个菜单项。
• DOWN：将焦点移动到下一个菜单项。
• RIGHT：打开子菜单（如果可用）。
• LEFT：关闭当前子菜单并将焦点移动到父菜单项。如果不在子菜单中，则不执行任何操作。
• ESCAPE：关闭当前子菜单并将焦点移动到父菜单项。如果不在子菜单中，则不执行任何操作。

键入一个字母会将焦点移动到标题以该字符开头的第一个项目。重复相同的字符将在匹配的项目之间循环。在一秒计时器内键入更多字符将匹配这些字符。

已禁用的项目可以接收键盘焦点，但不允许任何其他交互。

• ui-menu：菜单的外容器以及任何嵌套的子菜单。如果菜单包含图标，则此顶级元素还将具有 ui-menu-icons 类。
  • ui-menu-item：单个菜单项的容器。其中包含项目文本本身的元素以及子菜单的元素。
    • ui-menu-item-wrapper：每个单独菜单项内的包装器元素，包含文本内容和指示子菜单的图标。
      • ui-menu-icon：通过 icons 选项设置的子菜单图标。
  • ui-menu-divider：菜单项之间的分隔符元素。

依赖项

• UI 核心
• 小部件工厂
• 位置

• 此小部件需要一些功能性 CSS，否则它将无法工作。如果您构建自定义主题，请使用小部件的特定 CSS 文件作为起点。