Меню навигации jQuery Mobile

Меню навигации jQuery Mobile

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

По умолчанию, ссылки в навигационной панели автоматически преобразуются в кнопки (не требуется data-role="button").

Используйте атрибут data-role="navbar", чтобы определить навигационную панель:

Пример

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Домашняя страница</a></li>
      <li><a href="#anylink">Страница 2</a></li>
      <li><a href="#anylink">Поиск</a></li>
    </ul>
  </div>
</div>

Попробуйте сами

Совет:Ширина кнопки по умолчанию соответствует содержимому. Используйте неразделенный список для равномерного разделения кнопок: одна кнопка занимает 100% ширины, две кнопки делят 50% ширины, три кнопки 33.3%, и так далее. Однако, если вы установили пять или более кнопок в навигационной панели, они будут изогнуты в несколько строк (смотрите примеры в нижней части страницы "Более сложные примеры").

Активная кнопка

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

Если вам нужно реализовать этот вид без нажатия на ссылку, используйте класс "ui-btn-active":

Пример

<li><a href="#anylink" class="ui-btn-active">Главная страница</a></li>

Попробуйте сами

Для нескольких страниц вам, возможно, потребуется установить вид "выбранного" для каждого элемента управления, чтобы показать, что пользователь просматривает эту страницу. Если вы хотите сделать это, добавьте класс "ui-state-persist", а также класс "ui-btn-active" к ссылке:

Пример

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Главная страница</a></li>

Попробуйте сами

Более примеров

Меню навигации в содержимом
Как добавить меню навигации в "data-role="content"".
Меню навигации в нижнем колонтитуле
Как добавить меню навигации в нижний колонтитул.
Определение иконок в меню навигации
Как разместить иконки в меню навигации в нижнем колонтитуле.
Более пяти кнопок
Десять кнопок в меню навигации.