jQuery Mobile 主題

jQuery Mobile 提供了五種不同的樣式主題，從 "a" 到 "e" - 每種主題帶有不同顏色的按鈕、欄、內(nèi)容塊，等等。jQuery Mobile 中的一種主題由多種可見的效果和顏色構(gòu)成。

如需定制應(yīng)用程序的外觀，請(qǐng)使用 data-theme 屬性，并為該屬性分配一個(gè)字母：

<div data-role="page" data-theme="a|b|c|d|e">

提示：混合您喜歡的主題！

默認(rèn)地，jQuery Mobile 為頁眉和頁腳使用 "a" 主題，為頁眉內(nèi)容使用 "c" 主題（亮灰）。不過，您能夠自如地對(duì)主題進(jìn)行混合。

主題化的頁面、內(nèi)容和頁腳

實(shí)例

<div data-role="header" data-theme="b"></div>

<div data-role="content" data-theme="a"></div>

<div data-role="footer" data-theme="e"></div>

親自試一試

主題化的對(duì)話框

實(shí)例

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

親自試一試

主題化的按鈕

實(shí)例

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

親自試一試

主題化的圖標(biāo)

實(shí)例

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

親自試一試

頁眉和頁腳中的主題化按鈕

實(shí)例

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

親自試一試

主題化的導(dǎo)航欄

實(shí)例

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

親自試一試

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

實(shí)例

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

親自試一試

主題化列表

實(shí)例

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

親自試一試

主題化劃分按鈕

實(shí)例

<ul data-role="listview" data-split-theme="e">

親自試一試

主題化的可折疊列表

實(shí)例

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

親自試一試

主題化表單

實(shí)例

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

親自試一試

主題化的可折疊表單

實(shí)例

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Click me - I'm collapsible!</legend>

親自試一試

添加新主題

jQuery Mobile 同時(shí)允許您向移動(dòng)頁面添加新主題。

請(qǐng)通過編輯 CSS 文件（如已下載 jQuery Mobile）來添加或編輯新主題。只需拷貝一段樣式，并用字母名（f-z）來對(duì)類進(jìn)行重命名，然后調(diào)整為您喜歡的顏色和字體即可。

您也可以通過在 HTML 文檔中使用主題類來添加新樣式 - 為工具條添加類 ui-bar-(a-z)，并為內(nèi)容添加類 ui-body-(a-z)：

實(shí)例

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

親自試一試