JQuery UI пример - Меню (Menu)
Взаимодействуя с помощью мыши и клавиатуры можно использовать для навигации по меню тематизации.
Для получения более подробной информации о компонентах меню см API документации компонентов меню (меню Widget) .
По умолчанию функция
При использовании конфигурации по умолчанию, отключить вложенные пункты меню и меню. Он состоит из списка преобразованных и добавлены темы и поддерживает взаимодействие мыши и клавиатуры. Попробуйте использовать клавиши управления курсором для навигации по меню.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI меню (меню) - функция по умолчанию </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#menu") .menu ();
});
</ Script>
<Style>
.ui меню {ширина: 150px;}
</ Style>
</ Head>
<Body>
<Ul ID = "меню">
<Li класс = "Пользовательский интерфейс-состояние-инвалидов"> <a href="#"> Абердин </a> </ li>
<Li> <a href="#"> Ada </a> </ li>
<Li> <a href="#"> Adamsville </a> </ li>
<Li> <a href="#"> Addyston </a> </ li>
<Li>
<a href="#"> Delphi </a>
<Ul>
<Li класс = "Пользовательский интерфейс-состояние-инвалидов"> <a href="#"> Ada </a> </ li>
<Li> <a href="#"> Саар </a> </ li>
<Li> <a href="#"> Зальцбург </a> </ li>
</ UL>
</ Li>
<Li> <a href="#"> Саар </a> </ li>
<Li>
<a href="#"> Зальцбург </a>
<Ul>
<Li>
<a href="#"> Delphi </a>
<Ul>
<Li> <a href="#"> Ada </a> </ li>
<Li> <a href="#"> Саар </a> </ li>
<Li> <a href="#"> Зальцбург </a> </ li>
</ UL>
</ Li>
<Li>
<a href="#"> Delphi </a>
<Ul>
<Li> <a href="#"> Ada </a> </ li>
<Li> <a href="#"> Саар </a> </ li>
<Li> <a href="#"> Зальцбург </a> </ li>
</ UL>
</ Li>
<Li> <a href="#"> Окунь </a> </ li>
</ UL>
</ Li>
<Li класс = "Пользовательский интерфейс-состояние-инвалидов"> <a href="#"> Amesville </a> </ li>
</ UL>
</ Body>
</ HTML>
иконка
Меню с конфигурацией по умолчанию, который показывает, как пользоваться меню с иконками.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> меню JQuery UI (меню) - значок </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#menu") .menu ();
});
</ Script>
<Style>
.ui меню {ширина: 150px;}
</ Style>
</ Head>
<Body>
<Ul ID = "меню">
<Li> <a href="#"> <SPAN класс = "UI-значок UI-значок диска"> </ SPAN> сохранить </a> </ li>
<Li> <a href="#"> <SPAN класс = "UI-значок UI-значок-ZoomIn"> </ SPAN> Увеличить </a> </ li>
<Li> <a href="#"> <SPAN класс = "UI-значок UI-значок-ZoomOut"> </ SPAN> уточняют </a> </ li>
<Li класс = "Пользовательский интерфейс-состояние-инвалидов"> <a href="#"> <SPAN класс = "UI-значок UI-значок-принт"> </ SPAN> Печать ... </a> </ li >
<Li>
<a href="#"> играть </a>
<Ul>
<Li> <a href="#"> <SPAN класс = "UI-значок UI-значок прятки-старт"> </ SPAN> на </a> </ li>
<Li> <a href="#"> <SPAN класс = "UI-значок UI-значок остановки"> </ SPAN> Стоп </a> </ li>
<Li> <a href="#"> <SPAN класс = "UI-значок UI-значок-игра"> </ SPAN> Play </a> </ li>
<Li> <a href="#"> <SPAN класс = "UI-значок UI-значок-искать конец"> </ SPAN> следующая </a> </ li>
</ UL>
</ Li>
</ UL>
</ Body>
</ HTML>