Темы jQuery Mobile

Темы jQuery Mobile

jQuery Mobile предлагает пять различных стилевых тем, от "a" до "e" - каждая тема имеет кнопки, панели, блоки контента и т.д. различных цветов. Одна из тем jQuery Mobile состоит из множества видимых эффектов и цветов.

Чтобы настроить外观 приложения, используйте атрибут data-theme и присвойте ему букву:

<div data-role="page" data-theme="a|b|c|d|e">
Значение Описание Пример
a По умолчанию. Белый текст на черном фоне. Тест
b Белый текст на синем фоне / черный текст на灰色ном фоне Тест
c Черный текст на светло-сером фоне Тест
d Черный текст на белом фоне Тест
e Черный текст на оранжевом фоне Тест

Совет:Смешайте любимые темы!

По умолчанию, jQuery Mobile использует тему "a" для заголовков и подзаголовков, тему "c" для содержимого заголовков (светло-серый). Однако, вы можете свободно комбинировать темы.

Тематические страницы, содержимое и подзаголовки

Пример

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

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

Тематические диалоговые окна

Пример

<a href="#pagetwo" data-rel="dialog">Перейти на страницу темы диалога</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

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

Тематические кнопки

Пример

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

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

Тематические иконки

Пример

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

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

Тематические кнопки в заголовке и подзаголовке

Пример

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Домой</a>
  <h1>Добро пожаловать на мою домашнюю страницу</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Поиск</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Кнопка 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Кнопка 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Кнопка 3</a>
</div>

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

Тематизированная навигационная панель

Пример

<div data-role="footer" data-theme="e">
  <h1>Вставьте текст подвал</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Кнопка 1</a></li>
      <li><a href="#" data-icon="arrow-r">Кнопка 2</a></li>
      <li><a href="#" data-icon="arrow-r">Кнопка 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Кнопка 4</a></li>
    </ul>
  </div> 
</div>

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

Тематизированные сжимаемые кнопки и содержимое

Пример

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Нажми на меня - я сжимаемый!</h1>
  <p>Я расширенное содержимое.</p>
</div>

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

Тематизированный список

Пример

<ul data-role="listview" data-theme="e">
  <li><a href="#">Элемент списка</a></li>
  <li data-theme="a"><a href="#">Пункт списка</a></li>
  <li data-theme="b"><a href="#">Элемент списка</a></li>
  <li><a href="#">Элемент списка</a></li>
</ul>

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

Тематизированные разделительные кнопки

Пример

<ul data-role="listview" data-split-theme="e">

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

Тематизированные складывающиеся списки

Пример

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

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

Тематизированные формы

Пример

<label for="name">Полное имя:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Выберите любимый цвет:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Красный</option>
  <option value="green">Зеленый</option>
  <option value="blue">Синий</option>
</select>

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

Тематизированные складывающиеся формы

Пример

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Нажмите меня - я складывающийся!</legend>

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

Добавление новой темы

jQuery Mobile также позволяет добавлять новые темы на мобильные страницы.

Добавьте или отредактируйте новые темы, редактируя файл CSS (например, если уже загружен jQuery Mobile). Просто скопируйте фрагмент стиля, переименуйте классы с помощью букв (f-z) и настройте их до自己喜欢的 цвета и шрифта.

Вы также можете добавить новые стили, используя темы классов в документе HTML - добавьте класс ui-bar-(a-z) для панели инструментов и ui-body-(a-z) для содержимого:

Пример

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

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