jQueryのモバイルテーマ
jQueryのモバイルは、二つの異なるスタイルのテーマを提供し"a"と"b"というように、ボタン、バー、コンテンツブロックごとに異なる色で、それぞれを、と- 。
使用し、アプリケーションの外観をカスタマイズするにはdata-theme属性を、および文字の属性を割り当てます。
<div data-role="page" data-theme="a|b" >
| 値 | 説明 | 例 |
|---|---|---|
| a | ページコンテンツのためのライトグレーの背景に黒のテキスト ヘッダーとフッターのための灰色の背景に黒のテキスト ボタンの薄い灰色の背景に黒のテキスト アクティブなボタンの青い背景に白いテキスト リンクの青いテキスト ライトグレーのテキスト（プレースホルダ）、または入力フィールドの白地に黒の文字（値） | それを試してみてください |
| b | ページコンテンツのための暗い灰色の背景に白文字 ヘッダーとフッターのための暗い灰色の背景に白文字 ボタンの木炭の背景に白いテキスト 上の白いテキスト"cyan"アクティブなボタンの青い背景 "Cyan"のリンクの青いテキスト 灰色のテキスト（プレースホルダ）、または入力フィールドの黒い背景に白いテキスト（値） | それを試してみてください |
ボタンのclass="ui-btn" 、使用"ui-btn-a|b" ：グレー（デフォルト）または黒のいずれかのボタンのスタイルをクラスを
<a href="#" class="ui-btn ui-btn-a|b" >Button</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> »それを自分で試してみてください テーマのボタン
テーマアイコン
テーマポップアップ
ヘッダーとフッターでのテーマ設定ボタン
例
<div data-role="header">
<a href="#" class="ui-btn
ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-btn-b">Add Me On Instagram</a>
</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 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> »それを自分で試してみてください スプリットボタンをテーマ設定
折りたたみリストのテーマ設定
例
<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のモバイルはまた、あなたのモバイルページに新しいテーマを追加できます。
（あなたはjQueryのモバイルをダウンロードしている場合）、CSSファイルを編集して新しいテーマを追加または編集します。 ただスタイルのブロックをコピーして、文字の名前（CZ）を持つクラスの名前を変更し、あなたが好きなように色やフォントを調整します。
また、HTML文書内のテーマクラスを使用して、新しいスタイルを追加することができます - ツールバーのクラス「UI-バー - （AZ）」を追加し、「UI-body-（AZ）「コンテンツとUIページ-THEME-（のためにページのAZ）」：
例
<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のモバイルの以前のバージョンでは、JavaScriptは、要素が親のテーマを継承する方法を処理するために使用されます。 1.4のように、フレームワークは、パフォーマンスの向上に焦点を当てているとJavaScriptは、純粋なCSSに置き換えられました。
：jQueryのモバイルチームが独自のカスタムテーマを作成するのに役立つツール、作成したThemeRoller 。 また、新しいバージョンと互換性を持たせるための古いテーマをアップグレードするには、このツールを使用することができます。