Панели инструментов jQuery Mobile
Элементы панели инструментов часто помещаются в верхней и нижней части - для навигации "легкого доступа".
Панели инструментов jQuery Mobile
Панели Заголовка
Заголовки обычно содержат название страницы / логотип или одну или две кнопки (обычно Главная, Опции или Поиск).
Можно добавить кнопки в левую и/или правую сторону в заголовке.
Код ниже, добавит одну кнопку слева и одну кнопку справа от текста заголовка:
Пример
<a href="#" data-role="button">Главная</a>
<h1>Добро Пожаловать на Мою Домашнюю Страничку</h1>
<a href="#" data-role="button">Поиск</a>
</div>
Попробуйте сами »
Следующий код добавит кнопку в левую сторону заголовка:
<a href="#" data-role="button">Главная</a>
<h1>Добро Пожаловать на Мою Домашнюю Страничку</h1>
</div>
Однако, если Вы поместите ссылку кнопки после элемента <h1>, то она не будет выведена на экран справа от текста. Чтобы добавить кнопку в правую сторону заголовка, укажите класс "ui-btn-right":
Пример
<h1>Добро Пожаловать на Мою Домашнюю Страничку</h1>
<a href="#" data-role="button" class="ui-btn-right">Поиск</a>
</div>
Попробуйте сами »
Заголовок может содержать одну или две кнопки, в то время как у подвала нет никакого ограничения в этом плане.
Панели подвала
Подвалы более гибки чем заголовки - они более функциональны и изменяются от страницы к странице, и могут поэтому содержать столько кнопок, сколько необходимо:
Пример
<a href="#" data-role="button">Добавьте Меня в Facebook</a>
<a href="#" data-role="button">Добавьте Меня в Twitter</a>
<a href="#" data-role="button">Добавьте Меня в Instagram</a>
</div>
Попробуйте сами »
Примечание: У подвала нет тот же самый стиль как у заголовка (пропущены некоторые отступы и пространство, и кнопки не центрируются). Чтобы исправить это, поместите класс "ui-btn" в Ваш подвал:
Вы можете также группировать кнопки в подвале горизонтально или вертикально:
Пример
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="plus">Добавьте Меня в Facebook</a>
<a href="#" data-role="button" data-icon="plus">Добавьте Меня в Twitter</a>
<a href="#" data-role="button" data-icon="plus">Добавьте Меня в Instagram</a>
</div>
</div>
Попробуйте сами »
Расположение Заголовков и Подвалов
Заголовок и подвал могут быть расположены тремя способами:
- Встроенно - По умолчанию. Заголовки и подвалы встраиваются в контент страницы
- Фиксированно - Заголовки и подвалы остаются расположенными сверху и снизу страницы
- На весь экран - То же, что и фиксированно; заголовки и подвалы остаются расположенными сверху и снизу страницы, но также они находятся над контентом страницы. Также они являются частично прозрачными
Используйте атрибут data-position, чтобы расположить Ваши заголовки и подвалы:
Встроенная Позиция (Значение по умолчанию)
<div data-role="footer" data-position="inline"></div>
Попробуйте сами »
Фиксированная позиция
<div data-role="footer" data-position="fixed"></div>
Попробуйте сами »
Чтобы включить полноэкранную позицию, используйте data-position="fixed" и добавьте атрибут data-fullscreen в элемент:
Полноэкранная Позиция
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
Попробуйте сами »
Подсказка: Полноэкранная позиция идеальна для фотографий, изображений и видео.
Подсказка: Касание экрана скрывает и показывает заголовки и подвалы как для фиксированных, так и для полноэкранных позиций.