JQuery Мобильная панель инструментов

Предыдущий: значок Jquery Мобильная кнопка

Далее: панель навигации JQuery Мобильный

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

Голова Бар

столбец Head обычно содержит титульный лист / логотип или одну или две кнопки (как правило, домашней страницы, или вариант поиска).

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

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

примеров

<Div данных роли = "заголовок">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left"> Главная </a>
<H1> Добро пожаловать на мою домашнюю страницу </ h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left"> поиск </a>
</ Div>

Попробуйте »

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

примеров

<Div данных роли = "заголовок">
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left"> Главная </a>
<H1> Добро пожаловать на мою домашнюю страницу </ h1>
</ Div>

Попробуйте »

Тем не менее, если вы поставите ссылку кнопка расположена после того, как <h1> элемент не будет в состоянии отображать текст справа. Для добавления кнопки справа от главы названия, указать класс как "Ui-БТН-вправо":

примеров

<Div данных роли = "заголовок">
<H1> Добро пожаловать на мою домашнюю страницу </ h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left"> поиск </a>
</ Div>

Попробуйте »

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

Хвост-бар

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

примеров

<Div данных роли = "сноска">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Следуйте за мной на Facebook </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Следуйте за мной на Twitter </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Следуй за мной по Instagram </a>
</ Div>

Попробуйте »

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

примеров

Попробуйте »

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

примеров

<Div данных роли = "сноска" стиль = "выравнивания текста: центр;">
<DIV данных роль = "controlgroup " тип-данных = "горизонтальный">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Следуйте за мной на Facebook </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Следуйте за мной на Twitter </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Следуй за мной по Instagram </a>
</ Div>
</ Div>

Попробуйте »

Размещение бар-бар головы и хвоста

Голова и хвост можно расположить тремя способами:

Инлайн - по умолчанию. США внутренний бар заголовка и задней бар и содержание страницы.
Fixed - бар голова и хвост бар крепится к верхней и нижней части страницы.
На весь экран - режим Фиксированное позиционирование в основном то же самое с бруском с головой и хвостом бара, прикрепленного к верхней и нижней части страницы. Но когда он был вне экрана при прокрутке панели не будет отображаться снова автоматически, если не нажать на экран, который изображение или видео категория поднятый в смысле применения очень полезно. Обратите внимание, что эта панель инструментов режима будет охватывать содержание страницы, так что лучше всего использовать в особых случаях.

Использование данных положение объекта, чтобы определить местонахождение головы и хвоста бар-бар: