jQuery Mobile 主题
jQuery Mobile 主题
jQuery Mobile 提供了五种不同的样式主题，从 "a" 到 "e" - 每种主题带有不同颜色的按钮、栏、内容块，等等。jQuery Mobile 中的一种主题由多种可见的效果和颜色构成。
如需定制应用程序的外观，请使用 data-theme 属性，并为该属性分配一个字母：
<div data-role="page" data-theme="a|b|c|d|e">| 值 | 描述 | 例子 |
|---|---|---|
| a | 默认。黑色背景上的白色文本。 | 测试 |
| b | 蓝色背景上的白色文本 / 灰色背景上的黑色文本 | 测试 |
| c | 亮灰色背景上的黑色文本 | 测试 |
| d | 白色背景上的黑色文本 | 测试 |
| e | 橙色背景上的黑色文本 | 测试 |
提示：混合您喜欢的主题！
默认地，jQuery Mobile 为页眉和页脚使用 "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">Go To The Themed Dialog Page</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">Button</a> <a href="#" data-role="button" data-theme="b">Button</a> <a href="#" data-role="button" data-theme="c">Button</a>
主题化的图标
实例
<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>
页眉和页脚中的主题化按钮
实例
<div data-role="header"> <a href="#" data-role="button" data-icon="home" data-theme="b">Home</a> <h1>Welcome To My Homepage</h1> <a href="#" data-role="button" data-icon="search" data-theme="e">Search</a> </div> <div data-role="footer"> <a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a> <a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a> <a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a> </div>
主题化的导航栏
实例
<div data-role="footer" data-theme="e">
<h1>Insert Footer Text Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="b">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="collapsible" data-theme="b" data-content-theme="e"> <h1>Click me - I'm collapsible!</h1> <p>I'm the expanded content.</p> </div>
主题化列表
实例
<ul data-role="listview" data-theme="e"> <li><a href="#">List Item</a></li> <li data-theme="a"><a href="#">List Item</a></li> <li data-theme="b"><a href="#">List Item</a></li> <li><a href="#">List Item</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="#">Agnes</a></li>
</ul>
</div>
主题化表单
实例
<label for="name">Full Name:</label> <input type="text" name="text" id="name" data-theme="a"> <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="e"> <legend>Click me - I'm collapsible!</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>