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

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

Заголовки и подвалы — это элементы, которые предшествуют соответственно содержанию страницы. Виджет панели инструментов позволяет создавать заголовки и подвалы.

Заголовки

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

Структура заголовка

Заголовок — это панель инструментов в верхней части страницы, которая обычно содержит текст заголовка страницы и необязательные кнопки, расположенные слева и/или справа от заголовка для навигации или действий. Заголовки могут быть необязательно закреплены, чтобы они оставались в верхней части экрана во все время, вместо того, чтобы прокручиваться вместе со страницей.

Текст заголовка обычно представляет собой элемент заголовка H1, но можно использовать любой уровень заголовка (H1-H6), чтобы обеспечить семантическую гибкость. Например, страница, содержащая несколько мобильных "страниц", может использовать элемент H1 на домашней "странице" и элемент H2 на вторичных страницах. Все уровни заголовков стилизуются идентично по умолчанию, чтобы поддерживать визуальную согласованность.

<div data-role="header">
  <h1> Page Title </h1>
</div>

• ui-toolbar-header: Внешний контейнер для заголовка панели инструментов, который обеспечивает границу.
  • ui-toolbar-header-button-left: Этот класс можно применять для позиционирования кнопок слева в заголовке панели инструментов. Вы можете предоставить дополнительные классы для левой кнопки, используя опцию classes и этот класс в качестве ключа
  • ui-toolbar-title: Элемент заголовка панели инструментов
  • ui-toolbar-header-button-right: Этот класс можно применять для позиционирования кнопок справа в заголовке панели инструментов. Вы можете предоставить дополнительные классы для правой кнопки, используя опцию classes и этот класс в качестве ключа
• ui-toolbar-footer: Внешний контейнер для заголовка панели инструментов, который обеспечивает границу.

  Примечание: Подвал панели инструментов не предоставляет классы для позиционирования кнопки. Дополнительную информацию см. в демо-примерах панели инструментов

  • ui-toolbar-title: Элемент заголовка панели инструментов

Основные функции заголовка

Панель инструментов заголовка по умолчанию наследует тему с шаблоном страницы, но вы можете легко установить цвет темы, добавив атрибут data-theme в заголовок. Например, data-theme="b". При использовании внешних заголовков необходимо установить тему, так как нет родительской страницы, которая могла бы унаследовать тему.

Добавление кнопок

В стандартной конфигурации заголовка есть места для кнопок по обе стороны от заголовка. Каждая кнопка обычно представляет собой элемент a (якоря) или элемент button, у которого установлен атрибут data-role="button". Для экономии места кнопки в виджетах панели инструментов устанавливаются со стилями inline, поэтому кнопка имеет ширину только текста и значков, которые она содержит.

Позиционирование кнопок по умолчанию

Плагин панели инструментов ищет непосредственных потомков контейнера заголовка и автоматически устанавливает первую ссылку в слот левой кнопки, а вторую ссылку — в слот правой. В этом примере кнопка «Отмена» отобразится в левом слоте, а «Сохранить» — в правом слоте, в зависимости от их последовательности в исходном порядке.

<div data-role="header">
  <a href="index.html" data-icon="delete">Cancel</a>
  <h1>Edit Contact</h1>
  <a href="index.html" data-icon="check">Save</a>
</div>

Выделение кнопок визуально

Кнопки автоматически принимают цвет штриха строки, в которой они находятся, поэтому ссылка в строке заголовка с цветом «a» также будет стилизована как кнопки цвета «a». Просто сделайте кнопку визуально заметной. Здесь мы добавляем атрибут data-theme и устанавливаем цвет штриха кнопки на «b», чтобы выделить кнопку «Сохранить».

<div data-role="header">
  <a href="index.html" data-icon="delete">Cancel</a>
  <h1>Edit Contact</h1>
  <a href="index.html" data-icon="check" data-theme="b">Save</a>
</div>

Управление позицией кнопки с помощью классов

Позицию кнопки также можно управлять, добавляя классы к якорям кнопки, а не полагаясь на исходный порядок. Это особенно полезно, если вы хотите иметь кнопку только в правом слоте. Чтобы указать позицию кнопки, добавьте класс ui-btn-left или ui-btn-right к якорю.

<div data-role="header">
  <h1>Page Title</h1>
  <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>

Добавление кнопок в виджеты панели инструментов без заголовка

Заголовок в панели заголовка имеет некоторый отступ, который придает панели ее высоту. Если вы не хотите использовать заголовок, вам необходимо добавить элемент с class="ui-title", чтобы панель могла получить высоту и отображаться правильно.

<div data-role="header">
  <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
  <span class="ui-title" />
</div>

Добавление кнопок "Назад"

jQuery Mobile имеет функцию автоматического создания и добавления кнопок "Назад" к любому заголовку, хотя она отключена по умолчанию. Это в первую очередь полезно в приложениях без Chrome, например, в приложениях, работающих в веб-вью native app. Фреймворк автоматически создает кнопку "Назад" в заголовке, когда опция addBackBtn плагина панели инструментов равна true. Это также можно установить с помощью разметки, если у дива заголовка есть атрибут data-add-back-btn="true".

Если вы используете атрибут data-rel="back" у якоря, все щелчки по этому якорю будут имитировать кнопку "Назад", возвращаясь на одну запись в истории и игнорируя значение href якоря по умолчанию. Это особенно полезно при ссылке на именованную страницу, например, на ссылку, которая называется «домой», или при генерации кнопок "Назад" с помощью JavaScript, например, для закрытия диалогового окна. При использовании этой функции в вашей исходной разметке убедитесь, что предоставлен осмысленный href, который фактически указывает на URL-адрес исходной страницы. Это позволит функции работать для пользователей в браузерах C-класса.

Если вы хотите только обратный переход без фактического возвращения в историю, используйте атрибут data-direction="reverse".

Настройка текста кнопки "Назад"

Если вы хотите настроить текст кнопки "Назад", вы можете использовать атрибут data-back-btn-text="previous" на вашем элементе панели инструментов или установить его программно с помощью опций плагина панели инструментов:
$.mobile.toolbar.prototype.options.backBtnText = "previous";

Стиль кнопки "Назад" по умолчанию

Если вы хотите настроить роль-тему кнопки "Назад", вы можете использовать:
$.mobile.toolbar.prototype.options.backBtnTheme = "a";
Если вы делаете это программно, установите эту опцию внутри обработчика события mobileinit.

Настраиваемые конфигурации заголовка

Если вам нужно создать заголовок, который не соответствует настройкам по умолчанию, просто оберните свою настраиваемую разметку в любой контейнер, например, в div. Плагин не будет применять автоматическую логику кнопки к обернутому содержимому внутри контейнера заголовка, поэтому вы можете писать пользовательские стили для компоновки содержимого в вашем заголовке.

Также можно создавать пользовательские панели без использования атрибута header data-role вообще. Например, начните с любого контейнера и добавьте класс ui-bar для применения стандартных отступов панели и добавьте класс ui-bar-b для назначения стилей цветовых штрихов панели из вашей темы. («b» может быть любой буквой штриха.)

<div class="ui-bar ui-bar-b">
  <h3>I'm just a div with bar classes and a mini inline <a href="#" data-role="button" data-mini="true">Button</a></h3>
</div>

Обратите внимание, что .ui-bar не следует добавлять к панелям заголовков или подвалов, которые занимают всю ширину страницы, так как дополнительные отступы приведут к тому, что элемент полной ширины выйдет за пределы своего родительского контейнера. Чтобы добавить отступы внутри панели инструментов полной ширины, оберните ее содержимое в элемент и примените отступы к этому элементу вместо этого.

Написав несколько простых стилей, легко создать панели сообщений такого вида:

Подвалы

Структура панели подвала

Панель footer имеет ту же основную структуру, что и заголовок, но использует значение атрибута data-role, равное footer.

<div data-role="footer">
  <h4>Footer content</h4>
</div>

Панель инструментов подвала по умолчанию наследует тему с шаблоном страницы, но вы можете легко установить цвет темы, добавив атрибут data-theme в заголовок. Например, data-theme="b". При использовании внешних заголовков необходимо установить тему, так как нет родительской страницы, которая могла бы унаследовать тему.

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

Поскольку у подвалов нет таких же предписанных соглашений разметки, как у заголовков, мы рекомендуем использовать макетные сетки или писать пользовательские стили, чтобы получить желаемый дизайн.

Добавление кнопок

Любая ссылка или допустимая разметка кнопки с добавленным атрибутом data-role="button" в подвал автоматически преобразуется в кнопку. Для экономии места кнопки в виджетах панели инструментов автоматически устанавливаются со стилями inline, так что кнопка имеет ширину только текста и значков, которые она содержит.

По умолчанию у виджетов панели инструментов нет отступов для размещения навигационных панелей и других виджетов. Чтобы включить отступ на панели, добавьте class="ui-bar" в подвал.

<div data-role="footer" class="ui-bar">
  <a href="index.html" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-icon-right ui-icon-plus">Add</a>
  <a href="index.html" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-icon-right ui-icon-arrow-u">Up</a>
  <a href="index.html" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-icon-right ui-icon-arrow-d">Down</a>
</div>

Это создаёт панель инструментов с кнопками, расположенными в строке

Обратите внимание, что .ui-bar не следует добавлять к заголовкам или подвалам, занимающим всю ширину страницы, так как дополнительный отступ может привести к выходу полноширинного элемента за пределы своего родительского контейнера. Чтобы добавить отступ внутри полноширинной панели инструментов, оберните содержимое виджета панели инструментов в элемент и примените отступ к этому элементу.

Чтобы сгруппировать кнопки в набор кнопок, оберните ссылки в обёртку с атрибутами data-role="controlgroup" и data-type="horizontal".

<div data-role="controlgroup" data-type="horizontal">

Это создаёт сгруппированный набор кнопок:

Добавление элементов формы

В панели инструментов также можно добавить элементы формы и другое содержимое. Вот пример раскрывающегося списка в нижней панели. Рекомендуется использовать элементы формы мини-размера в панели инструментов, добавив атрибут data-mini="true":

Фиксированные и постоянные подвалы

В ситуациях, когда подвал является глобальным элементом навигации, возможно, вам нужно, чтобы он был фиксированным, чтобы он не выходил за пределы видимости при прокрутке. Также можно сделать фиксированную панель инструментов постоянной, чтобы она не перемещалась между переходами страниц. Это можно сделать, используя функцию постоянного подвала в jQuery Mobile.

Чтобы сделать подвал постоянным между переходами, добавьте атрибут data-id к подвалу всех соответствующих страниц и используйте одинаковое значение id для каждой. Например, добавив data-id="myfooter" на текущую страницу и целевую страницу, фреймворк сохранит якоря подвала в том же месте во время анимации перехода страницы. Этот эффект будет работать правильно только в том случае, если панели инструментов заголовка и подвала настроены на data-position="fixed", чтобы они были видны во время перехода.

Фиксированные панели инструментов

В браузерах, поддерживающих CSS position: fixed (большинство настольных браузеров, iOS5+, Android 2.2+, BlackBerry 6 и другие), виджеты панели инструментов, использующие плагин "fixedtoolbar", будут закреплены в верхней или нижней части области просмотра, а содержимое страницы будет свободно прокручиваться между ними. В браузерах, которые не поддерживают фиксированное позиционирование, панели инструментов будут оставаться позиционированными в потоке, вверху или внизу страницы.

Чтобы включить это поведение в заголовке или подвале, добавьте атрибут data-position="fixed" к элементу панели инструментов jQuery Mobile.

Пример разметки фиксированного заголовка:

<div data-role="header" data-position="fixed">
  <h1>Fixed Header</h1>
</div>

Пример разметки фиксированного подвала:

<div data-role="footer" data-position="fixed">
  <h1>Fixed Footer</h1>
</div>

Примечание: Когда вы динамически вставляете фиксированную панель инструментов в активную страницу, вы должны после этого вызвать $.mobile.resetActivePageHeight();, чтобы убедиться, что высота страницы остаётся корректной. Это иллюстрируется в примере.

Панели инструментов во весь экран

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

Чтобы включить этот параметр в фиксированном заголовке или подвале, добавьте атрибут data-fullscreen к элементу.

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

Формы в панели инструментов

Хотя все элементы формы теперь протестированы на корректную работу в *статических* панелях инструментов по состоянию на jQuery Mobile 1.1, мы рекомендуем провести обширные тесты при использовании элементов формы в *фиксированных* панелях инструментов или в любых элементах position: fixed. Это может потенциально вызвать ряд непредсказуемых проблем в различных мобильных браузерах, особенно в Android 2.2/2.3 (подробно описано в разделе «Известные проблемы в Android 2.2/2.3» ниже).

Изменения в jQuery Mobile 1.1

До версии 1.1 jQuery Mobile использовала динамически перепозиционируемые панели инструментов для эффекта фиксированного заголовка, потому что очень немногие мобильные браузеры поддерживали свойство CSS position:fixed, а моделирование поддержки с помощью «псевдо» поведения JavaScript overflow-scrolling привело бы к снижению охвата браузеров, а также ощущалось бы неестественно на некоторых платформах. Это поведение было не идеальным, и jQuery Mobile 1.1 применила новый подход к фиксированным панелям инструментов, который обеспечивает гораздо более широкую поддержку. Фреймворк теперь предлагает истинные фиксированные панели инструментов на многих популярных платформах, при этом плавно деградируя на платформах, не поддерживающих эту функцию, до статического позиционирования.

Полифиллинг для старых платформ

Плагин фиксированной панели инструментов плавно деградирует на платформах, которые не поддерживают CSS position:fixed должным образом, таких как iOS4.3. Если вам по-прежнему необходимо поддерживать фиксированные панели инструментов на этой платформе (с поведением отображения/скрытия), включённым в предыдущих выпусках, группа Filament разработала полифилл, который вы можете использовать.

• Репозиторий кода Github с CSS и JavaScript, необходимыми для полифилла фиксированных панелей инструментов
• Предварительный просмотр URL с использованием кода в репозитории выше

Просто включите файлы CSS и JS после ваших ссылок на jQuery Mobile, и фиксированные панели инструментов будут работать аналогично jQuery Mobile 1.0 на iOS4.3 с включением нового API для плагина fixedtoolbar 1.1.

Если у вас есть предложения по улучшениям, форкните gist на github и сообщите нам!

Известная проблема с элементами управления формами внутри фиксированных панелей инструментов и программной прокруткой

Существует скрытая проблема в iOS5 и некоторых платформах Android, когда элементы управления формами, размещённые внутри контейнеров с фиксированным позиционированием, могут терять свою область захвата при программной прокрутке окна (например, с использованием window.scrollTo). Это не проблема, специфичная для jQuery Mobile, но из-за неё мы рекомендуем не выполнять программную прокрутку документа при использовании элементов управления формами внутри фиксированных панелей инструментов jQuery Mobile. Этот тикет из отслеживателя проекта Device Bugs подробнее объясняет эту проблему.

Известные проблемы в Android 2.2/2.3

Реализация position: fixed; в Android 2.2/2.3 может в сочетании со, казалось бы, не связанными стилями и шаблонами разметки вызывать ряд странных проблем, особенно в случае элементов position: absolute внутри элементов position: fixed. Хотя мы сделали всё возможное, чтобы обойти ряд этих уникальных ошибок в рамках библиотеки, пользовательские стили могут вызвать ряд проблем.

• Элементы форм на других страницах — списки выбора, в частности — могут перестать реагировать на взаимодействие пользователя, когда помещается пустой элемент с абсолютным позиционированием внутри элемента с фиксированным позиционированием. В редких случаях — и специфично для Android 2.2 — это может привести к тому, что *целые страницы* перестанут реагировать на взаимодействие пользователя. Это, похоже, можно решить, добавив любой символ в элемент с абсолютным позиционированием, включая неразрывный пробел, а в некоторых случаях даже пробелы.
• Описанная выше проблема также может возникать при абсолютном позиционировании изображения внутри элемента с фиксированным позиционированием, но *только* в том случае, если для этого изображения используются *иные параметры, чем его собственные размеры*. Если высота или ширина заданы для изображения с помощью CSS или источник изображения недопустим (следовательно, у изображения нет собственной высоты и ширины), эта проблема может возникнуть. Если изображение, которое изначально, скажем, 50x50 пикселей, помещено в фиксированный элемент и оставлено с его собственными размерами, эта проблема, похоже, не возникает.
• Когда элемент position: fixed появляется где-либо на странице, большинство 2D CSS-преобразований не будут работать. Странно, что только translate преобразования, похоже, не затронуты этой проблемой. Ещё более странно, что эта проблема решается установкой CSS opacity равной .9 или ниже для родителя фиксированного элемента.
• Комбинации position: fixed и свойств overflow лучше избегать, так как обе они известны тем, что вызывают непредсказуемые проблемы в более старых версиях Android OS.
• Любой элемент, который вызывает виртуальную клавиатуру, при размещении внутри элемента position: fixed, перестанет реагировать на ввод пользователя при использовании чего-либо кроме стандартной клавиатуры. Это включает Swype, XT9 или, похоже, любой метод ввода, кроме стандартной непрогнозирующей клавиатуры.

Хотя мы будем продолжать искать способы минимизировать эти ошибки, насколько это возможно, мы сейчас рекомендуем избегать реализации фиксированных панелей инструментов, содержащих сложные пользовательские стили и элементы форм, без тщательных тестов во всех версиях браузера Android.