Latest web development tutorials

jQueryのモバイルテーマ

jQueryのモバイルが「」から「B」から、二つの異なるテーマスタイルを提供します - 各テーマにしたボタン、ツールバーなどのコンテンツブロックの色が矛盾している、視覚効果は、各トピックのために同じではありません。

要素のデータ・テーマ属性を設定することにより、アプリケーションの外観をカスタマイズすることができます。 

<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

値 説明 例
A 灰色の背景ヘッドと下部にページ黒のテキストは、青の背景に白い文字に灰色の背景の背景黒いボタングレーのテキストのアクティベーションボタンとリンク上の黒いテキストです
入力入力ボックスプレースホルダの属性値は、値がブラックライトグレーです 		試します
B ヘッドの下部に白いテキストとページ黒い背景白いテキストが黒の背景に白色のテキストボタンが青色の背景に白色のテキストに木炭背景ボタンやリンクを活性化します
入力入力ボックスplaceholder属性値はライトグレーで、値は白です 		試します

使用して、ボタンのスタイルを使用クラス= "UI-BTN」、「UI-BTN-| 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データ-役割= "ヘッダー">
<a href="#" class="ui-btn ui-btn-b">ホーム</a>
<H1>私のホームページへようこそ</ H1>
<a href="#" class="ui-btn">検索します</a>
</ DIV>

<DIVデータ-役割= "フッター">
<a href="#" class="ui-btn ui-btn-b"> Facebookの</a>の上で私に従ってください
<a href="#" class="ui-btn">ツイッター</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のモバイルは、モバイル・ページに新しいトピックを追加することができます。

（あなたは既に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のを 。 あなたは、新しいバージョンと互換性作る、古いテーマをアップグレードするには、このツールを使用することができます。