JQuery Mobile Темы
JQuery Mobile предоставляет две различные темы стиля, "a" и "b" - с разными цветами для кнопок, баров, блоков контента и так далее.
Для того, чтобы настроить внешний вид вашего приложения, используйте data-theme атрибута, и назначить атрибут с письмом:
<div data-role="page" data-theme="a|b" >
| Стоимость | Описание | пример |
|---|---|---|
| a | Черный текст на светло-сером фоне для содержимого страницы Черный текст на сером фоне для верхних и нижних колонтитулов Черный текст на светло-сером фоне для кнопок Белый текст на синем фоне для активных кнопок Синий текст на ссылки Светло-серый текст (заполнитель) или черный текст (значение) на белом фоне для полей ввода | Попробуй |
| b | Белый текст на темно-сером фоне для содержимого страницы Белый текст на темно-сером фоне для верхних и нижних колонтитулов Белый текст на темно-сером фоне для кнопок Белый текст на "cyan" голубой фон для активных кнопок "Cyan" синий текст на ссылки Серый текст (заполнитель) или белый текст (значение) на черном фоне для полей ввода | Попробуй |
Для кнопок с class="ui-btn" , используйте "ui-btn-a|b" класс стиль кнопки либо серый ( по умолчанию) или черный:
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
"a" тема используется для большинства элементов, а также дочерние элементы часто наследует тему своего родителя (или страницы).
Тематизация Колонтитулы
пример
<div data-role="header" 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> Попробуй сам " Theming Кнопки
Theming Иконки
пример
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
Попробуй сам " Тематизация Popups
Theming Кнопки в Колонтитулы
пример
<div data-role="header">
<a href="#" class="ui-btn
ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
Попробуй сам " Тематизация Навигация Бары
пример
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text
Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div> Попробуй сам " Theming Панели
Тематизация Складная кнопки и содержание
пример
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div> Попробуй сам " Списки Theming
пример
<ul data-role="listview" data-theme="b">
<li><a href="#">List
Item</a></li>
<li><a href="#">List
Item</a></li>
<li data-theme="a"><a href="#">List
Item</a></li>
<li><a href="#">List Item</a></li>
</ul> Попробуй сам " Тематизация Split Кнопки
Тематизация Складные Списки
пример
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> Попробуй сам " Theming Формы
пример
<label for="name">Full Name:</label>
<input type="text" name="text"
id="name" data-theme="b">
<label for="colors">Choose Favorite
Color:</label>
<select id="colors"
name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option
value="blue">Blue</option>
</select> Попробуй сам " Тематизация Складные Формы
пример
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend> Попробуй сам " Добавить новые темы
JQuery Mobile также позволяет добавлять новые темы для мобильных страниц.
Добавить или редактировать новые темы путем редактирования файла CSS (если у вас есть загрузить JQuery Mobile). Просто скопируйте блок стилей и переименовать классы с именем буквы (CZ), а также настроить цвета и шрифты, как вам нравится.
Вы можете также добавить новые стили, используя тематические классы в HTML-документе - добавить класс "Ui-бар- (Az)" для панелей инструментов, «Пользовательский интерфейс-body- (аз)" для содержания и пользовательский интерфейс-страницы-theme- ( аз) "на странице:
пример
<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 . Вы также можете использовать этот инструмент для обновления старых тем, чтобы сделать их совместимыми с новой версией.