Jquery Мобильные темы
JQuery Mobile обеспечивает два различных тематических стилей, от "а" до "B" - каждый тематические кнопки, панели инструментов и т.д. блок цвета контента являются противоречивыми, визуальный эффект не то же самое для каждой темы.
Установив атрибут элемента данных темы можно настроить внешний вид приложения:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
| значение | описание | примеров |
|---|---|---|
| Page черный текст на сером фоне головы и нижней части черный текст на сером фоне черный фон кнопки серый текстовые кнопки активации и ссылки на белый текст на синем фоне вход ввода значение атрибута окно заполнитель светло-серый, черный значение | пробовать | |
| б | Page черный фон с белым текстом в нижней части головы белый текст на черном фоне кнопки белый текст с активированным углем фона кнопки и ссылки на белый текст на синем фоне вход ввода значение атрибута окно заполнитель светло-серый цвет, значение белый | пробовать |
Кнопка Стиль Используйте класс = "Пользовательский интерфейс-BTN", используя "пользовательский интерфейс-БТН-а | б" кнопку настройки класса недоступна (по умолчанию) или черный:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
 | тема в стиле "А" для большинства элементов, подэлементы как правило, наследуют стиль родительского элемента. |
|---|
Тема верх и низ
примеров
<div data-role="footer" data-theme="b"></div>
Попробуйте »
Темы диалогового окна в нижней части головы
примеров
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
Попробуйте »
кнопка темы
Тема иконки
примеров
Попробуйте »
тема поп
Кнопка Темы в нижней части головы и
примеров
<a href="#" class="ui-btn ui-btn-b"> Главная </a>
<H1> Добро пожаловать на мою домашнюю страницу </ h1>
<a href="#" class="ui-btn"> поиск </a>
</ Div>
<Div данных роли = "сноска">
<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>
Попробуйте »
Тема панель навигации
примеров
<h1>文本头部</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>
Попробуйте »
Стиль панели
Тема разборные кнопок и контент
примеров
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Попробуйте »
Список тем
примеров
<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>
Попробуйте »
Тема Кнопка сплит
Тема Список Складывающийся
примеров
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
Попробуйте »
Темы Форма
примеров
<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>
Попробуйте »
Тема разборная форма
примеров
<legend>Click me - I'm collapsible!</legend>
Попробуйте »
Добавить новую тему
JQuery Mobile могут добавлять новые темы в мобильной странице.
Изменяя файл CSS, чтобы добавить или изменить новую тему (если вы загрузили JQuery Mobile). Вам нужно только скопировать модуль стиля, а затем повторно письмо имя команды класса (CZ), и добавить свой любимый цвет и стиль шрифта.
Вы можете также добавить HTML документ, относящийся к новому стилю, панель инструментов добавить класс: пользовательский интерфейс-бар- (аз), добавить категории содержания текста: пользовательский интерфейс-body- (аз), добавлять категории страниц: пользовательский интерфейс-страницы theme- ( А.З.).
примеров
.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 . Вы можете использовать этот инструмент, чтобы обновить старую тему, что делает его совместимым с новой версией. |
|---|