JQuery Mobile Панели инструментов
Панель инструментов элементы часто помещаются внутри верхние и нижние колонтитулы - для "легкий доступ" навигация:
Заголовки Бары
Заголовок находится в верхней части страницы и обычно содержат страницы название / логотип или одну или две кнопки (как правило, дома, опции или поиска).
Можно добавлять кнопки влево и / или на правую сторону в заголовке.
Приведенный ниже код, добавит кнопку "Home" слева и кнопку "Поиск" справа от заголовка в заголовке текста:
пример
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> Попробуй сам " Следующий код только добавит кнопку в левой части заголовка заголовка:
пример
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> Попробуй сам " Следующий код только добавит кнопку в правой части заголовка заголовка:
пример
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> Попробуй сам " Заголовок может содержать одну или две кнопки, в то время как нижний колонтитулы не имеет предела.
Footer Бары
Сноска расположен в нижней части страницы.
Сноска является более гибким, чем заголовок - это более функциональным и изменчива на протяжении страниц, и, следовательно, может содержать столько кнопок, сколько необходимо:
пример
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> Попробуй сам " Совет: Кнопки в сноске не центрированы по умолчанию. Чтобы это исправить, просто использовать CSS:
Вы можете также сгруппировать кнопки в нижней горизонтально или вертикально:
пример
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> Попробуй сам " Позиционирование Верхние и нижние колонтитулы
Заголовок и подвал можно расположить тремя способами:
- Inline - По умолчанию. Верхние и нижние колонтитулы являются инлайн с содержанием страницы
- Fixed - Верхние и нижние колонтитулы будут оставаться расположены в верхней и нижней части страницы
- На Fullscreen - Ведет себя как фиксированные; верхние и нижние колонтитулы будут оставаться расположены в верхней и нижней части, но и по содержимому страницы. Он также немного сквозной
Используйте атрибут данных положения для позиционирования и колонтитулы:
Инлайн Позиция (по умолчанию)
<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> Попробуй сам " Чтобы включить полноэкранное позицию, использование данных положение = "фиксированной" и добавить атрибут данных полноэкранных к элементу:
Полноэкранный Позиция
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> Попробуй сам " Совет: полноэкранное позиция идеально подходит для фотографий, изображений и видео.
Совет: При нажатии на экран будет скрывать и показывать верхние и нижние колонтитулы для фиксированных и полноэкранных позиций.
Еще примеры
Отображение только значок в панели инструментов
Используя ui-btn-icon-notext класс только отображать иконку в кнопки верхнего и нижнего колонтитула.