Лучшее руководство по Jquery Мобильные темы в 2024 году. В этом руководстве вы можете изучить
Тема верх и низ,примеров,Темы диалогового окна в нижней части головы,примеров,кнопка темы,примеров,Тема иконки,примеров,тема поп,примеров,Кнопка Темы в нижней части головы и,примеров,Тема панель навигации,примеров,Стиль панели,примеров,Тема разборные кнопок и контент,примеров,Список тем,примеров,Тема Кнопка сплит,примеров,Тема Список Складывающийся,примеров,Темы Форма,примеров,Тема разборная форма,примеров,Добавить новую тему,примеров,
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="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>
Попробуйте »
кнопка темы
примеров
<a href="#" class="ui-btn ui-btn-b">黑色按钮</a>
Попробуйте »
Тема иконки
примеров
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
Попробуйте »
тема поп
примеров
<div data-role="popup" id="myPopup" data-theme="b">
Попробуйте »
Кнопка Темы в нижней части головы и
примеров
<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>
Попробуйте »
Тема панель навигации
примеров
<div data-role="footer" data-theme="b">
<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>
Попробуйте »
Стиль панели
примеров
<div data-role="panel" id="myPanel" data-theme="b">
Попробуйте »
Тема разборные кнопок и контент
примеров
<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>
Попробуйте »
Список тем
примеров
<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>
Попробуйте »
Тема Кнопка сплит
примеров
<ul data-role="listview" data-split-theme="b">
Попробуйте »
Тема Список Складывающийся
примеров
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
Попробуйте »
Темы Форма
примеров
<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 документ, относящийся к новому стилю, панель инструментов добавить класс: пользовательский интерфейс-бар- (аз), добавить категории содержания текста: пользовательский интерфейс-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 . Вы можете использовать этот инструмент, чтобы обновить старую тему, что делает его совместимым с новой версией. |
---|