jQuery Mobile Темы
jQuery Mobile предоставляет 2 различных стиля тем, от "a" до "b" - каждая тема имеет разные цвета для кнопок, панелей инструментов, блоков содержимого и т. д., и каждая тема имеет различный визуальный эффект.
Вы можете настроить внешний вид приложения, задав атрибут data-theme элемента:
<a href="../index.html" class="ui-btn ui-btn-a|b">按钮</a>
| Значение | Описание | Пример |
|---|---|---|
| a | Страница имеет серый фон и черный текст Верхний и нижний колонтитулы имеют серый фон и черный текст Кнопки имеют серый фон и черный текст Активные кнопки и ссылки имеют белый текст на синем фоне В полях ввода значение атрибута placeholder светло-серое, а значение — черное |
Попробуйте |
| b | Страница имеет черный фон и белый текст Верхний и нижний колонтитулы имеют чёрный фон и белый текст У кнопок белый текст на тёмно-сером фоне Активные кнопки и ссылки имеют белый текст на синем фоне В полях ввода значение атрибута placeholder светло-серое, а значение — белое |
Попробуйте |
Стили кнопок используют class="ui-btn". Используйте класс "ui-btn-a|b", чтобы сделать кнопку серой (по умолчанию) или чёрной:
<a href="../index.html" class="ui-btn ui-btn-a|b">按钮</a>
 |
Стиль темы "a" используется для большинства элементов; дочерние элементы обычно наследуют стиль родительского элемента. |
|---|
Тема верхнего и нижнего колонтитулов
Пример
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
Попробуйте »
Тема верхнего и нижнего колонтитулов диалогового окна
Пример
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
Попробуйте »
Кнопки темы
Иконки темы
Всплывающее окно темы
Кнопки темы верхнего и нижнего колонтитула
Пример
<div data-role="header">
<a href="#" class="ui-btn ui-btn-b">Главная</a>
<h1>Добро пожаловать на мою домашнюю страницу</h1>
<a href="#" class="ui-btn">Поиск</a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Подпишитесь на меня в Facebook</a>
<a href="#" class="ui-btn">Подпишитесь на меня в Twitter</a>
<a href="#" class="ui-btn ui-btn-b">Подпишитесь на меня в Instagram</a>
</div>
<a href="#" class="ui-btn ui-btn-b">Главная</a>
<h1>Добро пожаловать на мою домашнюю страницу</h1>
<a href="#" class="ui-btn">Поиск</a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Подпишитесь на меня в Facebook</a>
<a href="#" class="ui-btn">Подпишитесь на меня в Twitter</a>
<a href="#" class="ui-btn ui-btn-b">Подпишитесь на меня в Instagram</a>
</div>
Попробуйте »
Тема панели навигации
Пример
<div data-role="footer" data-theme="b">
<h1>Текстовый заголовок</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Кнопка 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>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Кнопка 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="b">
<h1>Нажми меня - я сворачиваюсь!</h1>
<p>Я развёрнутое содержимое.</p>
</div>
<h1>Нажми меня - я сворачиваюсь!</h1>
<p>Я развёрнутое содержимое.</p>
</div>
Попробуйте »
Список с темой
Пример
<ul data-role="listview" data-theme="b">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li data-theme="a"><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ul>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li data-theme="a"><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ul>
Попробуйте »
Разделённые кнопки с темой
Сворачиваемый список с темой
Пример
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Агнес</a></li>
</ul>
</div>
<ul data-role="listview">
<li><a href="#">Агнес</a></li>
</ul>
</div>
Попробуйте »
Форма с темой
Пример
<label for="name">Полное имя:</label>
<input type="text" name="text" id="name" data-theme="b">
<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>
<input type="text" name="text" id="name" data-theme="b">
<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="b">
<legend>Нажмите на меня - я сворачиваюсь!</legend>
<legend>Нажмите на меня - я сворачиваюсь!</legend>
Попробуйте »
Добавить новую тему
jQuery Mobile позволяет добавлять новые темы на мобильные страницы.
Вы можете добавлять или редактировать новые темы, изменяя CSS-файл (если вы скачали jQuery Mobile). Вам просто нужно скопировать модуль стилей, затем переименовать буквенные имена классов (c-z) и добавить в стили понравившиеся цвета и шрифты.
Вы также можете добавлять новые стили тем в HTML-документе. Для панелей инструментов добавьте классы: ui-bar-(a-z); для текстового содержимого добавьте классы: ui-body-(a-z); для страниц добавьте классы: ui-page-theme-(a-z).
Пример
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
Попробуйте »
|
В предыдущих версиях jQuery Mobile JavaScript использовался для того, чтобы элементы наследовали стили родительской темы. После версии 1.4 фреймворк уделил больше внимания улучшению производительности и больше не использует JavaScript для наследования, а вместо этого использует чистый CSS. Команда jQuery Mobile создала для этой цели инструмент по адресуThemeRollerВы можете использовать этот инструмент для обновления старых тем, чтобы они были совместимы с новой версией. |
|---|