Панели навигации jQuery Mobile
Панель навигации состоит из группы ссылок, которые являются выровненными горизонтально, обычно внутри заголовка или подвала.
Создание Панели навигации
По умолчанию ссылки в панели навигации автоматически превратятся в кнопки (нет потребности в data-role="button").
Используйте атрибут data-role="navbar", чтобы определить панель навигации:
Пример
<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":
При использовании нескольких страниц, Вы можете сделать "выбранной" кнопку, которая представляет страницу, на которой находится пользователь. Чтобы сделать это, добавьте класс "ui-state-persist" для своих ссылок, а также класс "ui-btn-active":
Пример
Попробуйте сами »
Еще Примеры
Панели навигации в контенте
Как добавить панель навигации внутри data-role="content".
Панели навигации в подвале
Как добавить панель навигации в подвал.
Расположение значков в панели навигации
Как расположить значки в панели навигации в подвале.
Больше чем 5 кнопок
Демонстрация 10 кнопок в панели навигации