jQuery Mobile トピック

jQuery Mobile トピック

jQuery Mobile は「a」から「e」までの5種類のスタイルテーマを提供しており、それぞれのテーマは異なる色のボタン、バー、コンテンツブロックなどを持っています。jQuery Mobileのテーマは、さまざまな視覚効果と色で構成されています。

アプリケーションの外観をカスタマイズするには、data-theme属性を使用し、この属性にアルファベットを割り当ててください。

<div data-role="page" data-theme="a|b|c|d|e">
値 説明 例
a デフォルト。黒い背景上的に白いテキスト。 テスト
b 青い背景上的に白いテキスト / 灰色の背景上的に黒いテキスト テスト
c 明るいグレーの背景上的に黒いテキスト テスト
d 白い背景上的に黒いテキスト テスト
e オレンジの背景上的に黒いテキスト テスト

ヒント：お好みのテーマを組み合わせてください！

デフォルトで、jQuery Mobileはヘッダおよびフッターに「a」テーマを使用し、ヘッダのコンテンツには「c」テーマ（明るいグレー）を使用します。ただし、テーマを組み合わせることができます。

テーマ化されたページ、コンテンツ、およびフッター

例

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

自分で試してみる

テーマ化されたダイアログ

例

<a href="#pagetwo" data-rel="dialog">テーマ化されたダイアログページに移動</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>

自分で試してみる

テーマ化されたボタン

例

<a href="#" data-role="button" data-theme="a">ボタン</a>
<a href="#" data-role="button" data-theme="b">ボタン</a>
<a href="#" data-role="button" data-theme="c">ボタン</a>

自分で試してみる

テーマ化されたアイコン

例

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

自分で試してみる

ページのヘッダおよびフッターにテーマ化されたボタン

例

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">ホーム</a>
  <h1>私のホームページへようこそ</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">検索</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">ボタン1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">ボタン2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">ボタン3</a>
</div>

自分で試してみる

テーマ化されたナビゲーションバー

例

<div data-role="footer" data-theme="e">
  <h1>ここにフッターテキストを挿入してください</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">ボタン1</a></li>
      <li><a href="#" data-icon="arrow-r">ボタン2</a></li>
      <li><a href="#" data-icon="arrow-r">ボタン3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >ボタン4</a></li>
    </ul>
  </div> 
</div>

自分で試してみる

テーマ化された折り畳みボタンとコンテンツ

例

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>クリックしてください - 折り畳み可能です！</h1>
  <p>これは拡張されたコンテンツです。</p>
</div>

自分で試してみる

テーマ化リスト

例

<ul data-role="listview" data-theme="e">
  <li><a href="#">リストアイテム</a></li>
  <li data-theme="a"><a href="#">リストアイテム</a></li>
  <li data-theme="b"><a href="#">リストアイテム</a></li>
  <li><a href="#">リストアイテム</a></li>
</ul>

自分で試してみる

テーマ化された分割ボタン

例

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

自分で試してみる

テーマ化された折り畳みリスト

例

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

自分で試してみる

テーマ化されたフォーム

例

<label for="name">フルネーム：</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">お気に入りの色を選んでください：</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">赤</option>
  <option value="green">緑</option>
  <option value="blue">ブルー</option>
</select>

自分で試してみる

テーマ化された折り畳みフォーム

例

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>クリックして展開！</legend>

自分で試してみる

新しいテーマを追加

jQuery Mobileは、モバイルページに新しいテーマを追加することも許可しています。

CSSファイル（例えばダウンロードされたjQuery Mobile）を編集して新しいテーマを追加または編集してください。スタイルの一部をコピーし、アルファベット名（f-z）でクラスをリネームし、お好みの色とフォントに調整してください。

HTMLドキュメントでテーマクラスを使用して新しいスタイルを追加することもできます - ツールバーにクラス ui-bar-(a-z) を追加し、コンテンツにクラス ui-body-(a-z) を追加してください：

例

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

自分で試してみる