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

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

элементы панели инструментов часто размещаются в заголовке и подвале - для реализации навигации "проверено":

строка заголовка

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

Вы можете добавить кнопки слева или/и справа в заголовке.

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

Пример

<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">Трансляция в Sina Weibo</a>
  <a href="#" data-role="button">Трансляция в Tencent Weibo</a>
  <a href="#" data-role="button">Трансляция в QQ Space</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">Трансляция в Sina Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Трансляция в Tencent Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Трансляция в QQ Space</a>
  </div>
</div>

Попробуйте это на себе

Положение заголовка и подзаголовка

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

  • Inline - по умолчанию. Заголовок и подзаголовок расположены в строке с содержимым страницы.
  • Фиксированное положение - страница и подзаголовок останутся в верхней и нижней части страницы.
  • Полный экран - как fixed; страница и подзаголовок останутся в верхней и нижней части страницы, но также над содержимым страницы. Он также слегка прозрачен

Используйте атрибут data-position для положения заголовка и подзаголовка:

Inline положение (по умолчанию)

<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>

Попробуйте это на себе

Совет:Полноэкранный режим идеален для фотографий, изображений и видео.

Совет:Для фиксированного и полноэкранного позиционирования касание экрана скрывает и показывает заголовок и подвал страницы.