Панель навигации JQuery Мобильный

Предыдущая: JQuery Mobile панель инструментов

Далее: JQuery Мобильный сборно - разборные блок

Панель навигации представляет собой набор ссылок, расположенных горизонтально состав, как правило, содержащийся внутри головы или хвоста.

По умолчанию ссылки в панели навигации автоматически станет кнопка (без данных роли = "Кнопка").

Использование данных-роли = "NavBar" атрибут, чтобы определить панель навигации:

примеров

Попробуйте »

	По умолчанию ширина кнопки и ее содержимое то же самое. Используйте неупорядоченный список, чтобы равномерно разделить ширину кнопок: одна кнопка на 100% ширины двух кнопок каждый приходится 50% от ширины трех кнопок каждый приходилось 33,3% от ширины, и так далее. Тем не менее, если вы укажете более чем пять кнопок на панели навигации будет разбита на несколько строк (смотрите раздел "Дополнительные примеры").

По умолчанию ширина кнопки и ее содержимое то же самое. Используйте неупорядоченный список, чтобы равномерно разделить ширину кнопок: одна кнопка на 100% ширины двух кнопок каждый приходится 50% от ширины трех кнопок каждый приходилось 33,3% от ширины, и так далее. Тем не менее, если вы укажете более чем пять кнопок на панели навигации будет разбита на несколько строк (смотрите раздел "Дополнительные примеры").

Навигация значки кнопок

Мы можем использовать атрибут-значок данных, чтобы добавить иконки для кнопок навигации:

примеров

<a href="#anylink" data-icon="search"> Поиск </a>

Попробуйте »

-Значок данных атрибутов с секцией класса CSS значка, используя ту же величину. класс CSS использовать класс = "UI-icon- значение" ,-значок данных атрибутов для использования данных-значок = "значение".

Значение свойства	описание	иконка
данных значок = "дом"	дома
данных значок = "стрелка-р"	На правой стрелки
данных значок = "поиск"	поиск

Для полного справочного руководства для всех кнопок значков JQuery Mobile, посетите наш JQuery Mobile значок Reference Manual .

значок Расположение

Как и "пользовательский интерфейс-БТН-icon- положение" той же категории (раздел значок подробно описаны), вы можете установить местоположение значка , отображаемого: Верхняя часть (голова), справа (справа), внизу (нижний) или влево (слева ).

Расположение иконок на контейнере навигационной панели обеспечивается с помощью данных-iconpos атрибут , чтобы указать местоположение:

Значение свойства	описание	примеров
данных-iconpos = "сверху"	Совместите верхнюю иконку	пробовать
данных-iconpos = "вправо"	Икона на правой выровнено	пробовать
данных-iconpos = "дно"	Совместите нижний значок	пробовать
данных-iconpos = "левый"	Совместите левый значок	пробовать

	По умолчанию значок находится над текстом кнопки навигации (на основе данных iconpos = "сверху").

кнопка активации

Когда ссылка на навигационной панели нажата, он будет выбран (нажатой) внешний вид.

Если вы хотите, чтобы получить этот вид не нажмите на ссылку, используйте класс = "Пользовательский интерфейс-БТН-активный":

примеров

Попробуйте »

Для нескольких страниц, вы можете проверить внешний вид каждой кнопки от имени текущей страницы пользователь находится. Для этого нужно добавить «UI-состоянии сохраняются" и "Ui-БТН-активный" ссылка на класс: