Темы jQuery Mobile
jQuery Mobile обеспечивает пять различных тем стилей, от "a" до "e" - каждая с различными цветами для кнопок, панелей, блоков контента и так далее. "Тема" в jQuery Mobile состоит из различных визуальных эффектов и цветов.
jQuery Mobile Темы
Чтобы настроить вид Вашего приложения, используйте атрибут data-theme и присвойте атрибуту букву:
Значение | Описание | Пример |
---|---|---|
a | По умолчанию. Белый текст на черном фоне | Показать |
b | Белый текст на голубом фоне / Черный текст на сером фоне | Показать |
c | Черный текст на светло-сером фоне | Показать |
d | Черный текст на белом фоне | Показать |
e | Черный текст на оранжевом фоне | Показать |
Смешивайте темы так, как Вам нравится!
По умолчанию, jQuery Мобайл использует тему "a" (черную) для заголовков и подвалов, и тему "c" (светло-серую) для контента страницы. Однако, можно смешивать темы, как Вам нравится.
Заголовок Темы, Контент и Подвал
Пример
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>
Попробуйте сами »
Диалоговые окна Тем
Пример
<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="b">Кнопка</a>
<a href="#" data-role="button" data-theme="c">Кнопка</a>
Попробуйте сами »
Значки Тем
Кнопки Тем в заголовке и подвале
Пример
<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>
Попробуйте сами »
Панели навигации Тем
Пример
<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>
Попробуйте сами »
Складные кнопки и контент Тем
Пример
<h1>Кликни меня - Я складной!</h1>
<p>Я развернутый контент.</p>
</div>
Попробуйте сами »
Списки Тем
Пример
<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">
<li><a href="#">Иванов</a></li>
</ul>
</div>
Попробуйте сами »
Формы Тем
Пример
<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>
Попробуйте сами »
Складные Формы Тем
Пример
<legend>Кликни меня - Я складной!</legend>
Попробуйте сами »
Добавьте новые темы
jQuery Mobile также позволяет Вам добавить новые темы в Ваши мобильные страницы.
Добавьте или отредактируйте новые темы, редактируя файл CSS (если Вы загрузили jQuery Mobile). Просто скопируйте блок стилей и переименуйте классы с названием буквы (f-z) и скорректируйте цвета и шрифты, как Вам нравится.
Можно также добавить, новые стили при использовании тематических классов в документе HTML - добавьте класс ui-bar-(a-z) для панелей инструментов и класс ui-body-(a-z) для контента:
Пример
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>
Попробуйте сами »