jQuery Mobile 提供了 2 種不同的主題樣式, 從 "a" 到 "b" - 每一種主題的按鈕，工具條，內(nèi)容塊等等顏色都不一致，每個(gè)主題的視覺(jué)效果也不一樣。

通過(guò)設(shè)置元素的data-theme屬性可以自定義應(yīng)用的外觀:

<a href="#" class="ui-btn ui-btn-a|b">按鈕</a>

值描述實(shí)例
a頁(yè)面為灰色背景黑色文字
頭部與底部均為灰色背景黑色文字
按鈕為灰色背景黑色文字
激活的按鈕和鏈接為白色文本藍(lán)色背景
input 輸入框中 placeholder 屬性值為淺灰色，value 值為黑色		嘗試一下
b頁(yè)面為黑色背景白色文字
頭部與底部均為黑色背景白色文字
按鈕為白色文字木炭背景
激活的按鈕和鏈接為白色文本藍(lán)色背景
input 輸入框中 placeholder 屬性值為淺灰色，value 值為白色		嘗試一下

按鈕樣式使用 class="ui-btn",使用 "ui-btn-a|b" 類(lèi)設(shè)置按鈕為灰色（默認(rèn)）或黑色：

<a href="#" class="ui-btn ui-btn-a|b">按鈕</a>

lamp"a" 主題的樣式用于大多數(shù)元素，子元素通常繼承父元素的樣式。

主題頭部和底部


實(shí)例

<!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>頁(yè)面頭部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>文本內(nèi)容</p>
    <a href="#" class="ui-btn">按鈕</a>
    <p>插入 <a href="#">鏈接</a> !</p>
  </div>

  <div data-role="footer" data-theme="b">
    <h1>頁(yè)面底部</h1>
  </div>
</div> 


</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

主題對(duì)話框的頭部底部

實(shí)例

<!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>歡迎來(lái)到我的主頁(yè)</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>歡迎!</p>
    <a href="#pagetwo" class="ui-btn">跳轉(zhuǎn)到頁(yè)面二</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>主題對(duì)話框!</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>我是一個(gè)主題對(duì)話框 - 我的頭部和底部是黑色的!</p>
    <a href="#pageone" class="ui-btn ui-btn-inline">跳轉(zhuǎn)到頁(yè)面一</a>
  </div>

  <div data-role="footer" data-theme="b">
    <h1>對(duì)話框底部文本</h1>
  </div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

主題按鈕

實(shí)例

<!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>頁(yè)面頭部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>普通按鈕:</p>
    <a href="#" class="ui-btn">灰色按鈕 (默認(rèn))</a>
    <a href="#" class="ui-btn ui-btn-b">黑色按鈕</a>
    <br>
  
    <p>內(nèi)聯(lián)按鈕:</p>
    <a href="#" class="ui-btn ui-btn-inline">灰色按鈕 (默認(rèn))</a>
    <a href="#" class="ui-btn ui-btn-inline ui-btn-b">黑色按鈕</a>
  </div>

  <div data-role="footer">
    <h1>頁(yè)面底部</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

主題圖標(biāo)

實(shí)例

<!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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

主題彈窗

實(shí)例

<!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>歡迎訪問(wèn)我的主頁(yè)</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>在我右上角有個(gè)關(guān)閉按鈕</p>
      <p><b>提示：</b> 你可以點(diǎn)擊彈窗的外部區(qū)域來(lái)關(guān)閉彈窗。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

頭部和底部的主題按鈕


實(shí)例

<!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">主頁(yè)</a>
    <h1>歡迎訪問(wèn)我的主頁(yè)</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>以下按鈕僅僅是用于演示，不會(huì)有任何效果。</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上關(guān)注我</a>
      <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上關(guān)注我</a>
      <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上關(guān)注我</a>
    </div>
  </div>
</div>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

主題導(dǎo)航欄


實(shí)例

<!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>導(dǎo)航欄將會(huì)主動(dòng)基礎(chǔ)父元素的樣式。可以通過(guò)添加 data-theme 屬性來(lái)自定義按鈕樣式。</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

主題面板

實(shí)例

<!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>我是一個(gè)主題面板!</p>
    <p> 你可以點(diǎn)擊面板之外的區(qū)域來(lái)關(guān)閉，或者按下 Esc 鍵或滑動(dòng)來(lái)關(guān)閉。</p>
  </div> 

  <div data-role="header">
    <h1>頁(yè)面頭部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>點(diǎn)擊以下按鈕打開(kāi)面板。</p>
    <a href="#myPanel" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all ui-shadow">打開(kāi)面板</a>
  </div>

  <div data-role="footer">
    <h1>頁(yè)面底部</h1>
  </div> 
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

主題可折疊按鈕和內(nèi)容

實(shí)例

<!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>點(diǎn)我 - 我是可折疊的！</h1>
      <p>我是折疊的內(nèi)容</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>文本底部</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

主題列表

實(shí)例

<!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>無(wú)序列表</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

主題分割按鈕

實(shí)例

<!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>分割按鈕實(shí)例</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 是一款免費(fèi)的開(kāi)源瀏覽器。發(fā)布于 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 是一款來(lái)自 Mozilla。發(fā)布于 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>分割按鈕實(shí)例</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

主題可折疊列表

實(shí)例

<!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>此處是頁(yè)腳文本</h1>
  </div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

主題表單

實(shí)例

<!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="搜索內(nèi)容..">
    <br><br>
 
    <label for="colors">請(qǐng)選擇喜愛(ài)的顏色：</label>
    <select id="colors" name="colors" data-theme="b">
      <option value="red">紅色</option>
      <option value="green">綠色</option>
      <option value="blue">藍(lán)色</option>
    </select>
    <br><br>
 
     <label for="switch">切換開(kāi)關(guān):</label>
       <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-theme="b">
     <br><br>
  
    <div data-role="controlgroup">
      <legend>請(qǐng)選擇喜愛(ài)的電影:</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

主題可折疊表單

實(shí)例

<!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>此處是頁(yè)腳文本</h1>
  </div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

添加新主題

jQuery Mobile 可以在移動(dòng)頁(yè)面添加新主題。

通過(guò)修改 CSS 文件來(lái)添加或編輯新主題(如果你已經(jīng)下載了 jQuery Mobile)。你只需要拷貝樣式模塊，然后重命令字母類(lèi)名（c-z）,并在樣式中添加你喜歡的顏色和字體。

你也可以在 HTML 文檔中添加主題的新樣式， 工具條添加類(lèi)： ui-bar-(a-z) ，文本內(nèi)容添加類(lèi): ui-body-(a-z) ,頁(yè)面添加類(lèi)：ui-page-theme-(a-z) 。

實(shí)例

<!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>應(yīng)用 "f" 主題的標(biāo)題樣式</h1>
  </div>

  <div data-role="main" class="ui-content ui-body-f">
    <p>應(yīng)用新的 "f" 主題的內(nèi)容樣式！</p>
  </div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

Note在之前的 jQuery Mobile 版本中, 使用 JavaScript 來(lái)為元素繼承父主題樣式。到了 1.4 版本后，框架更注重性能上的提升，已不再使用 JavaScript 來(lái)繼承，而是使用純 CSS。

jQuery Mobile 團(tuán)隊(duì)為此已經(jīng)創(chuàng)建了一個(gè)工具，地址為 ThemeRoller。你可以使用該工具來(lái)升級(jí)舊的主題，使其兼容新的版本。