JQuery Мобильный панели навигации
Панель навигации состоит из группы ссылок, которые выровнены по горизонтали, как правило, в пределах верхнего или нижнего колонтитула:
Строка кодируется как неупорядоченный список ссылок , обернутой внутри <div> элемент , который имеет data-role="navbar" атрибута:
пример
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
Попробуй сам " По умолчанию, ссылки внутри панели навигации автоматически превратится в кнопку (нет необходимости для class="ui-btn" или data-role="button" ).
Кнопки, по умолчанию, так широко, как его содержание. Используйте неупорядоченный список, чтобы разделить кнопки одинаково: 1 кнопка занимает 100% ширины, 2 кнопки разделяют 50% каждый, 3 кнопки 33,3% и т.д. Тем не менее, если вы зададите более 5 кнопок в навигационной панели, он будет смещаться на несколько строк (см "Дополнительные примеры" ниже).
Иконки в кнопки навигации
Чтобы добавить иконку на навигационной кнопки, используйте атрибут-значок данных:
-Значок данных атрибутов используют одни и те же значения, как классы CSS, указанные в разделе "Иконы". Единственное отличие состоит в том , что, вместо того , чтобы указать class="ui-icon- value " , необходимо указать атрибут data-icon=" value " .
| значение атрибута | Описание | Значок |
|---|---|---|
| data-icon="home" | Главная | |
| data-icon="arrow-r" | Правая стрелка | |
| data-icon="search" | Поиск |
Для полного ведения всех значков JQuery Mobile кнопки, пожалуйста , перейдите на наш JQuery Mobile иконки Reference .
Позиционирование иконки
Так же , как с "ui-btn-icon- position " класса (указанным в разделе "Иконы"), вы можете выбрать , где значок должен быть установлен в кнопке навигации: top, right, bottom или left .
Позиция значок установлен на контейнере NavBar - не представляется возможным расположить каждую отдельную ссылку кнопку. Использование data-iconpos атрибут для определения позиции:
| значение атрибута | Описание | пример |
|---|---|---|
| data-iconpos="top" | Топ выравнивание иконок | Попробуй |
| data-iconpos="right" | Выравнивание по правому краю значок | Попробуй |
| data-iconpos="bottom" | Нижняя выравнивание иконок | Попробуй |
| data-iconpos="left" | Выровнять по левому краю значок | Попробуй |
По умолчанию, иконки в кнопки навигации расположены над текстом (data-iconpos="top") на основе (data-iconpos="top") .
Активные кнопки
Когда звено в навигационной панели касании / щелкнул, он получает выбранный (в нажатом положении) смотреть.
Для того, чтобы достигнуть этого взгляда , без необходимости нажать на ссылку, используйте class="ui-btn-active" :
Для нескольких страниц, вы можете захотеть "выбранный" вид для каждой кнопки, которая представляет страницу, на которую пользователь. Для этого добавьте "ui-state-persist" класс к вашим ссылкам, а также "ui-btn-active" класс:
Еще примеры
Navbars в содержании
Как добавить панель навигации внутри data-role="content" .
Navbars в футере
Как добавить панель навигации внутри колонтитула.
Более 5 кнопок
Демонстрация 10 кнопок в панели навигации