通过设置元素的data-theme属性可以自定义应用的外观:
<div data-role="page" id="pageone" data-theme="a">
值 | 描述 | 实例 |
---|---|---|
a | 页面为灰色背景黑色文字 头部与底部均为灰色背景黑色文字 按钮为灰色背景黑色文字 激活的按钮和链接为白色文本蓝色背景 input 输入框中 placeholder 属性值为浅灰色,value 值为黑色 | 尝试一下 |
b | 页面为黑色背景白色文字 头部与底部均为黑色背景白色文字 按钮为白色文字木炭背景 激活的按钮和链接为白色文本蓝色背景 input 输入框中 placeholder 属性值为浅灰色,value 值为白色 | 尝试一下 |
按钮样式使用 class="ui-btn",使用 "ui-btn-a|b" 类设置按钮为灰色(默认)或黑色:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
"a" 主题的样式用于大多数元素,子元素通常继承父元素的样式。 |
主题头部和底部
<div data-role="header" data-theme="b"></div><div data-role="footer" data-theme="b"></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 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>
主题列表
<ol 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>
</ol>
<h2>分割按钮实例</h2>
<ul data-role="listview" data-inset="true" data-split-theme="b">
<li data-role="divider" data-theme="a">浏览器</li>
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p>
</a>
<a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
</li>
<li>
<a href="#">
<img src="firefox.png">
<h2>Mozilla Firefox</h2>
<p>Firefox 是一款来自 Mozilla。发布于 2004 年。</p>
</a>
<a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
</li>
</ul>
主题可折叠列表
<div data-role="collapsible" data-theme="b" data-content-theme="a">
<h4>B</h4>
<ul data-role="listview">
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
</ul>
</div>
</div>
主题表单
<form method="post" action="demoform.asp">
<div class="ui-fieldcontain">
<label for="name">全名:</label>
<input type="text" name="text" id="name" placeholder="你的名字.." data-theme="b">
<br><br>
<label for="search">您需要搜索什么?</label>
<input type="search" name="search" id="search" placeholder="搜索内容..">
<br><br>
<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>
<br><br>
<label for="switch">切换开关:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-theme="b">
<br><br>
<div data-role="controlgroup">
<legend>请选择喜爱的电影:</legend>
<label for="mov1">蜘蛛侠</label>
<input type="checkbox" name="mov1" id="mov1" data-theme="a">
<label for="mov2">变形金刚</label>
<input type="checkbox" name="mov2" id="mov2" data-theme="b">
</div>
</div>
</form>
主题可折叠表单
<div data-role="main" class="ui-content"><form method="post" action="demoform.asp">
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>点击我 - 我是可折叠的!</legend>
<label for="name">全名:</label>
<input type="text" name="text" id="name" data-theme="a">
<p>喜爱的颜色:</p>
<div data-role="controlgroup">
<label for="red">红色</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">绿色</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">蓝色</label>
<input type="checkbox" name="favcolor" id="blue" value="blue" data-theme="a">
</div>
<input type="submit" data-inline="true" value="提交" data-theme="b">
</fieldset>
</form>
</div>
添加新主题
jQuery Mobile 可以在移动页面添加新主题。
通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块,然后重命令字母类名(c-z),并在样式中添加你喜欢的颜色和字体。
你也可以在 HTML 文档中添加主题的新样式, 工具条添加类: ui-bar-(a-z) ,文本内容添加类: ui-body-(a-z) ,页面添加类:ui-page-theme-(a-z) 。
<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>
</head>
<body>
<div data-role="page" data-theme="f">
<div data-role="header" data-theme="f">
<h1>应用 "f" 主题的标题样式</h1>
</div>
<div data-role="main" class="ui-content ui-body-f">
<p>应用新的 "f" 主题的内容样式!</p>
</div>
</div>