Панели инструментов jQuery Mobile

Элементы панели инструментов часто помещаются в верхней и нижней части - для навигации "легкого доступа".

Панели инструментов jQuery Mobile

Панели Заголовка

Заголовки обычно содержат название страницы / логотип или одну или две кнопки (обычно Главная, Опции или Поиск).

Можно добавить кнопки в левую и/или правую сторону в заголовке.

Код ниже, добавит одну кнопку слева и одну кнопку справа от текста заголовка:

Пример

<div data-role="header">
  <a href="#" data-role="button">Главная</a>
  <h1>Добро Пожаловать на Мою Домашнюю Страничку</h1>
  <a href="#" data-role="button">Поиск</a>
</div>

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

Следующий код добавит кнопку в левую сторону заголовка:

<div data-role="header">
  <a href="#" data-role="button">Главная</a>
  <h1>Добро Пожаловать на Мою Домашнюю Страничку</h1>
</div>

Однако, если Вы поместите ссылку кнопки после элемента <h1>, то она не будет выведена на экран справа от текста. Чтобы добавить кнопку в правую сторону заголовка, укажите класс "ui-btn-right":

Пример

<div data-role="header">
  <h1>Добро Пожаловать на Мою Домашнюю Страничку</h1>
  <a href="#" data-role="button" class="ui-btn-right">Поиск</a>
</div>

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

Заголовок может содержать одну или две кнопки, в то время как у подвала нет никакого ограничения в этом плане.

Панели подвала

Подвалы более гибки чем заголовки - они более функциональны и изменяются от страницы к странице, и могут поэтому содержать столько кнопок, сколько необходимо:

Пример

<div data-role="footer">
  <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="footer" class="ui-btn">

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

Вы можете также группировать кнопки в подвале горизонтально или вертикально:

Пример

<div data-role="footer" class="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="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>

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

Фиксированная позиция

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

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

Чтобы включить полноэкранную позицию, используйте data-position="fixed" и добавьте атрибут data-fullscreen в элемент:

Полноэкранная Позиция

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

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

Подсказка: Полноэкранная позиция идеальна для фотографий, изображений и видео.

Подсказка: Касание экрана скрывает и показывает заголовки и подвалы как для фиксированных, так и для полноэкранных позиций.

Далее: Циклы JavaScript

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)