jQuery Mobile 主题
jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。
通过设置元素的data-theme属性可以自定义应用的外观:
<a href="#" class="ui-btn ui-btn-a|b">按钮</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" 主题的样式用于大多数元素，子元素通常继承父元素的样式。 |
|---|
主题头部和底部
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header" data-theme="b"> <h1>页面头部</h1> </div> <div data-role="main" class="ui-content"> <p>文本内容</p> <a href="#" class="ui-btn">按钮</a> <p>插入 <a href="#">链接</a> !</p> </div> <div data-role="footer" data-theme="b"> <h1>页面底部</h1> </div> </div> </body> </html>
主题对话框的头部底部
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>欢迎!</p> <a href="#pagetwo" class="ui-btn">跳转到页面二</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" data-dialog="true" id="pagetwo"> <div data-role="header" data-theme="b"> <h1>主题对话框!</h1> </div> <div data-role="main" class="ui-content"> <p>我是一个主题对话框 - 我的头部和底部是黑色的!</p> <a href="#pageone" class="ui-btn ui-btn-inline">跳转到页面一</a> </div> <div data-role="footer" data-theme="b"> <h1>对话框底部文本</h1> </div> </div> </body> </html>
主题按钮
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>页面头部</h1> </div> <div data-role="main" class="ui-content"> <p>普通按钮:</p> <a href="#" class="ui-btn">灰色按钮 (默认)</a> <a href="#" class="ui-btn ui-btn-b">黑色按钮</a> <br> <p>内联按钮:</p> <a href="#" class="ui-btn ui-btn-inline">灰色按钮 (默认)</a> <a href="#" class="ui-btn ui-btn-inline ui-btn-b">黑色按钮</a> </div> <div data-role="footer"> <h1>页面底部</h1> </div> </div> </body> </html>
主题图标
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a> <a href="#" class="ui-btn ui-btn-b ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a> </div> </div> </body> </html>
主题弹窗
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all">Show Popup</a> <div data-role="popup" id="myPopup" class="ui-content" data-theme="b"> <a href="#" data-rel="back" class="ui-btn ui-btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> <p>我是主题弹窗!.</p> <p>在我右上角有个关闭按钮</p> <p><b>提示：</b> 你可以点击弹窗的外部区域来关闭弹窗。</p> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
头部和底部的主题按钮
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>以下按钮仅仅是用于演示，不会有任何效果。</p> </div> <div data-role="footer" style="text-align:center;"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a> <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a> </div> </div> </div> </body> </html>
主题导航栏
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>文本头部</h1> </div> <div data-role="main" class="ui-content"> <p>导航栏将会主动基础父元素的样式。可以通过添加 data-theme 属性来自定义按钮样式。</p> </div> <div data-role="footer" data-theme="b"> <h1>Insert Footer Text Here</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> </body> </html>
主题面板
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="panel" id="myPanel" data-theme="b"> <h2>主题面板</h2> <p>我是一个主题面板!</p> <p> 你可以点击面板之外的区域来关闭，或者按下 Esc 键或滑动来关闭。</p> </div> <div data-role="header"> <h1>页面头部</h1> </div> <div data-role="main" class="ui-content"> <p>点击以下按钮打开面板。</p> <a href="#myPanel" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all ui-shadow">打开面板</a> </div> <div data-role="footer"> <h1>页面底部</h1> </div> </div> </body> </html>
主题可折叠按钮和内容
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>文本头部</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-theme="b" data-content-theme="b"> <h1>点我 - 我是可折叠的！</h1> <p>我是折叠的内容</p> </div> </div> <div data-role="footer"> <h1>文本底部</h1> </div> </div> </body> </html>
主题列表
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>有序列表</h2> <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> <br> <h2>无序列表</h2> <ul data-role="listview"> <li><a href="#">List Item</a></li> <li data-theme="b"><a href="#">List Item</a></li> <li data-theme="b"><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ul> <br> </div> </div> </body> </html>
主题分割按钮
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <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> </div> <div data-role="page" id="download"> <div data-role="main" class="ui-content"> <h3>分割按钮实例</h3> <p>下面的按钮仅供演示。</p> <a href="#" class="ui-btn ui-btn-b ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-check ui-btn-icon-left" data-rel="back">下载</a> <a href="#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-delete ui-btn-icon-left" data-rel="back">取消</a> </div> </div> </body> </html>
主题可折叠列表
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>主题化的可折叠列表</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-theme="b" data-content-theme="b"> <h4>A</h4> <ul data-role="listview"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> </ul> </div> <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> <div data-role="footer"> <h1>此处是页脚文本</h1> </div> </div> </body> </html>
主题表单
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>主题化表单</h1> </div> <div data-role="main" class="ui-content"> <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> </div> </body> </html>
主题可折叠表单
实例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>主题化的可折叠列表</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-theme="b" data-content-theme="b"> <h4>A</h4> <ul data-role="listview"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> </ul> </div> <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> <div data-role="footer"> <h1>此处是页脚文本</h1> </div> </div> </body> </html>
添加新主题
jQuery Mobile 可以在移动页面添加新主题。
通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块，然后重命令字母类名（c-z）,并在样式中添加你喜欢的颜色和字体。
你也可以在 HTML 文档中添加主题的新样式， 工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) ,页面添加类：ui-page-theme-(a-z) 。
实例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<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>
</body>
</html> | 在之前的 jQuery Mobile 版本中, 使用 JavaScript 来为元素继承父主题样式。到了 1.4 版本后，框架更注重性能上的提升，已不再使用 JavaScript 来继承，而是使用纯 CSS。 jQuery Mobile 团队为此已经创建了一个工具，地址为 ThemeRoller。你可以使用该工具来升级旧的主题，使其兼容新的版本。 |
|---|