jQuery Mobile 主題
jQuery Mobile 提供了 2 種不同的主題樣式, 從 "a" 到 "b" - 每一種主題的按鈕，工具條，內容塊等等顏色都不一致，每個主題的視覺效果也不一樣。
通過設定元素的data-theme屬性可以自定義應用的外觀:
<a href="https://www.itread01.com/jquerymobile/#" 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="https://www.itread01.com/jquerymobile/#" 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>
<div data-role="footer" data-theme="b"></div>
嘗試一下 ?
主題對話方塊的頭部底部
例項
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
嘗試一下 ?
主題按鈕
例項
<a href=https://www.itread01.com/jquerymobile/"#" class="ui-btn ui-btn-b">黑色按鈕
嘗試一下 ?
主題圖示
例項
<a href=https://www.itread01.com/jquerymobile/"#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search
嘗試一下 ?
主題彈窗
例項
<div data-role="popup" id="myPopup" data-theme="b">
嘗試一下 ?
頭部和底部的主題按鈕
例項
<div data-role="header">
<a href=https://www.itread01.com/jquerymobile/"#" class="ui-btn ui-btn-b">主頁
<h1>歡迎訪問我的主頁</h1>
<a href=https://www.itread01.com/jquerymobile/"#" class="ui-btn">搜尋
</div>
<div data-role="footer">
<a href=https://www.itread01.com/jquerymobile/"#" class="ui-btn ui-btn-b">在Facebook上關注我
<a href=https://www.itread01.com/jquerymobile/"#" class="ui-btn">在Twitter上關注我
<a href=https://www.itread01.com/jquerymobile/"#" class="ui-btn ui-btn-b">在Instagram上關注我
</div>
<a href=https://www.itread01.com/jquerymobile/"#" class="ui-btn ui-btn-b">主頁
<h1>歡迎訪問我的主頁</h1>
<a href=https://www.itread01.com/jquerymobile/"#" class="ui-btn">搜尋
</div>
<div data-role="footer">
<a href=https://www.itread01.com/jquerymobile/"#" class="ui-btn ui-btn-b">在Facebook上關注我
<a href=https://www.itread01.com/jquerymobile/"#" class="ui-btn">在Twitter上關注我
<a href=https://www.itread01.com/jquerymobile/"#" class="ui-btn ui-btn-b">在Instagram上關注我
</div>
嘗試一下 ?
主題導航欄
例項
<div data-role="footer" data-theme="b">
<h1>文字頭部</h1>
<div data-role="navbar">
<ul>
<li><a href=https://www.itread01.com/jquerymobile/"#" data-icon="home" data-theme="a">Button 1
<li><a href=https://www.itread01.com/jquerymobile/"#" data-icon="arrow-r">Button 2
<li><a href=https://www.itread01.com/jquerymobile/"#" data-icon="arrow-r">Button 3
<li><a href=https://www.itread01.com/jquerymobile/"#" data-icon="search" data-theme="a">Button 4
</ul>
</div>
</div>
<h1>文字頭部</h1>
<div data-role="navbar">
<ul>
<li><a href=https://www.itread01.com/jquerymobile/"#" data-icon="home" data-theme="a">Button 1
<li><a href=https://www.itread01.com/jquerymobile/"#" data-icon="arrow-r">Button 2
<li><a href=https://www.itread01.com/jquerymobile/"#" data-icon="arrow-r">Button 3
<li><a href=https://www.itread01.com/jquerymobile/"#" data-icon="search" data-theme="a">Button 4
</ul>
</div>
</div>
嘗試一下 ?
主題面板
例項
<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>
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
嘗試一下 ?
主題列表
例項
<ul data-role="listview" data-theme="b">
<li><a href=https://www.itread01.com/jquerymobile/"#">List Item
<li><a href=https://www.itread01.com/jquerymobile/"#">List Item
<li data-theme="a"><a href=https://www.itread01.com/jquerymobile/"#">List Item
<li><a href=https://www.itread01.com/jquerymobile/"#">List Item
</ul>
<li><a href=https://www.itread01.com/jquerymobile/"#">List Item
<li><a href=https://www.itread01.com/jquerymobile/"#">List Item
<li data-theme="a"><a href=https://www.itread01.com/jquerymobile/"#">List Item
<li><a href=https://www.itread01.com/jquerymobile/"#">List Item
</ul>
嘗試一下 ?
主題分割按鈕
例項
<ul data-role="listview" data-split-theme="b">
嘗試一下 ?
主題可摺疊列表
例項
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href=https://www.itread01.com/jquerymobile/"#">Agnes
</ul>
</div>
<ul data-role="listview">
<li><a href=https://www.itread01.com/jquerymobile/"#">Agnes
</ul>
</div>
嘗試一下 ?
主題表單
例項
<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="b">
<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
<option value=https://www.itread01.com/jquerymobile/"red">Red
<option value=https://www.itread01.com/jquerymobile/"green">Green
<option value=https://www.itread01.com/jquerymobile/"blue">Blue
</select>
<input type="text" name="text" id="name" data-theme="b">
<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
<option value=https://www.itread01.com/jquerymobile/"red">Red
<option value=https://www.itread01.com/jquerymobile/"green">Green
<option value=https://www.itread01.com/jquerymobile/"blue">Blue
</select>
嘗試一下 ?
主題可摺疊表單
例項
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>
<legend>Click me - I'm collapsible!</legend>
嘗試一下 ?
新增新主題
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>
.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>
嘗試一下 ?
 |
在之前的 jQuery Mobile 版本中, 使用 JavaScript 來為元素繼承父主題樣式。到了 1.4 版本後，框架更注重效能上的提升，已不再使用 JavaScript 來繼承，而是使用純 CSS。 jQuery Mobile 團隊為此已經建立了一個工具，地址為 ThemeRoller。你可以使用該工具來升級舊的主題，使其相容新的版本。 |
|---|