top
Loading...
jQuery Mobile 主題

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" 主題的樣式用於大多數元素,子元素通常繼承父元素的樣式。

主題頭部和底部

實例

<div data-role="header" 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>

嘗試一下 »

主題按鈕

實例

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

嘗試一下 »

主題圖標

實例

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>

嘗試一下 »

主題彈窗

實例

<div data-role="popup" id="myPopup" data-theme="b">

嘗試一下 »

頭部和底部的主題按鈕

實例

<div data-role="header">
  <a href="#" class="ui-btn ui-btn-b">主頁</a>
  <h1>歡迎訪問我的主頁</h1>
  <a href="#" class="ui-btn">搜索</a>
</div>

<div data-role="footer">
  <a href="#" class="ui-btn ui-btn-b">在Facebook上關注我</a>
  <a href="#" class="ui-btn">在Twitter上關注我</a>
  <a href="#" class="ui-btn ui-btn-b">在Instagram上關注我</a>
</div>

嘗試一下 »

主題導航欄

實例

<div data-role="footer" data-theme="b">
  <h1>文本頭部</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 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>

嘗試一下 »

主題列表

實例

<ul 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>
</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="#">Agnes</a></li>
  </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="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

嘗試一下 »

主題可折叠表單

實例

<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<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>

嘗試一下 »

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

jQuery Mobile 團隊為此已經創建了一個工具,地址為 ThemeRoller。你可以使用該工具來升級舊的主題,使其兼容新的版本。
北斗有巢氏 有巢氏北斗