JQuery UI API - меню часть (Меню Widget)
категория
использование
Описание: С помощью взаимодействия мыши и клавиатуры для навигации могут быть тематические меню.
Новая версия: 1.9
Меню может быть создан с помощью любых допустимых тегов, до тех пор, как элемент имеет строгую родительские отношения / ребенок и каждая запись имеет якорь. Самым распространенным элементом является неупорядоченный список ( <ul> ):
<Ul ID = "меню">
<Li> <a href="#"> Пункт 1 </a> </ li>
<Li> <a href="#"> Пункт 2 </a> </ li>
<Li> <a href="#"> Пункт 3 </a>
<Ul>
<Li> <a href="#"> Пункт 3-1 </a> </ li>
<Li> <a href="#"> Пункт 3-2 </a> </ li>
<Li> <a href="#"> Пункт 3-3 </a> </ li>
<Li> <a href="#"> Пункт 3-4 </a> </ li>
<Li> <a href="#"> Пункт 3-5 </a> </ li>
</ UL>
</ Li>
<Li> <a href="#"> Пункт 4 </a> </ li>
<Li> <a href="#"> Пункт 5 </a> </ li>
</ UL>
Если использовать не <ul> / <li> структура для меню и пунктов меню , используя одни и те же элементы, используйте menus возможность различать между двумя элементами, такими как menus: "div.menuElement" .
Добавляя к элементу ui-state-disabled , класс отключить любой пункт меню.
иконка
Чтобы добавить иконки в меню, включают значок в теге:
<Ul ID = "меню"> <Li> <a href="#"> <SPAN класс = "UI-значок UI-значок диска"> </ SPAN> Сохранить </a> </ li> </ UL>
Меню (Menu) автоматически добавляет необходимый отступ к записи нет значка.
сепаратор
Разделительные элементы могут быть созданы путем включения несвязанных пунктов меню, пункты меню могут быть только пробелы / тире:
<Ul ID = "меню"> <Li> <a href="#"> Пункт 1 </a> </ li> <Li> - </ li> <Li> <a href="#"> Пункт 2 </a> </ li> </ UL>
взаимодействие клавиатуры
- ENTER / SPACE: вызовите пункт меню действий имеет фокус, может открыть подменю.
- UP: она движется к учению пункта меню.
- DOWN: перейти к следующему учениями пункт меню.
- СПРАВА: Если есть возможность, а затем откройте подменю.
- СЛЕВА: закрытие текущего подменю, переместите курсор к пункту меню родительского. Если фокус не на подменю, ничего не делается.
- ПОБЕГ: закрытие текущего подменю, переместите курсор к пункту меню родительского. Если фокус не на подменю, ничего не делается.
Введите букву, переместите курсор к первой записи, начинающиеся с этой буквы. Повторите тот же символ будет цикл по записям соответствия. В свое время вы ввели больше символов совпадает с введенного символа.
Отключение экземпляров фокус клавиатуры, но не допускает какого-либо взаимодействия.
Тематизация
Компонент Menu (Меню Widget) с помощью рамки JQuery UI CSS , чтобы определить внешний вид и его стиль. Если вам нужно использовать указанный стиль меню, вы можете использовать следующее имя класса CSS:
-
ui-menu: внешний контейнер меню. Если меню содержит иконку, элемент будет дополнительно сui-menu-icons, класса.
полагаться
- Ядро пользовательского интерфейса (UI ядра)
- Библиотеки компонентов (Widget Factory)
- Расположение (Position)
дополнительная информация
- Часть требует некоторой функциональной CSS, в противном случае она не будет работать. Если вы создаете собственную тему, используйте виджет указанный файл CSS в качестве отправной точки.
примеров
Простое меню JQuery UI (меню).
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Компонент Menu (Меню Widget) Demo </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Style>
.ui меню {
ширина: 200px;
}
</ Style>
<Script SRC = "// code.jquery.com/jquery-1.10.2.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
</ Head>
<Body>
<Ul ID = "меню">
<Li> <a href="#"> Пункт 1 </a> </ li>
<Li> <a href="#"> Пункт 2 </a> </ li>
<Li> <a href="#"> Пункт 3 </a>
<Ul>
<Li> <a href="#"> Пункт 3-1 </a> </ li>
<Li> <a href="#"> Пункт 3-2 </a> </ li>
<Li> <a href="#"> Пункт 3-3 </a> </ li>
<Li> <a href="#"> Пункт 3-4 </a> </ li>
<Li> <a href="#"> Пункт 3-5 </a> </ li>
</ UL>
</ Li>
<Li> <a href="#"> Пункт 4 </a> </ li>
<Li> <a href="#"> Пункт 5 </a> </ li>
</ UL>
<Script>
$ ( "#menu") .menu ();
</ Script>
</ Body>
</ HTML>