Панели навигации jQuery Mobile

Рубрика: jQuery Мобайл

Панель навигации состоит из группы ссылок, которые являются выровненными горизонтально, обычно внутри заголовка или подвала.

Создание Панели навигации

По умолчанию ссылки в панели навигации автоматически превратятся в кнопки (нет потребности в 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">Страница Два</a></li>
      <li><a href="#anylink">Поиск</a></li>
    </ul>
</div>
</div>

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

Кнопки, по умолчанию, имеют ширину своего контента. Используйте неупорядоченный список, чтобы разделить кнопки одинаково: 1 кнопка займет 100% ширины, 2 кнопки совместно используют доступную ширину - по 50% каждая, 3 кнопки - 33,3 %, и т.д. Однако, если Вы укажете больше чем 5 кнопок в панели навигации, то она станет состоять из нескольких строк (см. "Еще Примеры" ниже).

Активные Кнопки

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

Чтобы достигнуть этого вида, нет необходимости касаться ссылки, используйте class="ui-btn-active":

Пример

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

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

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