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 團隊為此已經建立了一個工具，位址為

提交

PHP中文網

在先前的jQuery Mobile 版本中, 使用JavaScript 來為元素繼承父主題樣式。到了 1.4 版本後，框架更注重效能上的提升，已不再使用 JavaScript 來繼承，而是使用純 CSS。	ThemeRoller 。你可以使用該工具來升級舊的主題，使其相容於新的版本。