Виджет меню

Меню можно создать из любого допустимого разметки, при условии, что элементы имеют строгие отношения родитель/дочерний. Наиболее часто используемый элемент — неупорядоченный список (<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 Core
• Фабрика виджетов
• Позиция

• Для работы данного виджета требуется функциональный CSS. Если вы создаете пользовательскую тему, используйте специфический CSS-файл виджета в качестве отправной точки.