Uroki-jQuery.ru > Темы jQuery Мобайл >

Темы jQuery Mobile

Рубрика: Темы jQuery Мобайл

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

jQuery Mobile Темы

Чтобы настроить вид Вашего приложения, используйте атрибут data-theme и присвойте атрибуту букву:

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

Смешивайте темы так, как Вам нравится!

По умолчанию, jQuery Мобайл использует тему "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">Кнопка</a>
<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="plus" data-theme="e">Плюс</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="#">Иванов</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>

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

Далее: События jQuery Mobile

Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)