jQuery Mobile2(タグとか1)

●ページ切り替えの方法（ページ遷移のアニメーションエフェクト）

a要素に対してカスタムデータ属性「data-transition="エフェクトの種類"」を指定

【エフェクトの種類】

slide　：左右にスライドして切り替わる
slideup　：ページが下から上にスライドして切り替わる
slidedown　：ページが上から下にスライドして切り替わる
pop　：ページが拡大しながら切り替わる
fade　：ページがフェードイン／フェードアウトで切り替わる
flip　：ページが回転して切り替わる
none(もしくは記述しない)　：通常のリンクのように切り替わる

例：

<a href="#about" data-transition="slide">

※リンク（ページ）単位ではなく、サイト全体でページ遷移のアニメーションを一括して設定したい場合は、jQueryとjQuery Mobileのスクリプトファイルを読み込むscript要素の間に次のようなJavaScriptコードを追加します。
例：

 <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
 <script>
　	$(document).bind("mobileinit", function(){
 	     $.mobile.defaultTransition = "flip";
 	});
 </script>
 <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

▼ページ切り替えの方向を逆にする。

a要素に対してdata-direction属性「reverse」を設定すると、指定したアニメーションと逆向きの動きでリンクを作成
例:

<a href="#page1" data-direction="reverse">page1</a>

●リスト

ul、ol、li要素に対してカスタムデータ属性「data-role="listview"」を指定
例ul：

<div data-role="content">
<ul data-role="listview">
　 <li><a href="#page2">list</a></li>
　 <li><a href="#page2">list</a><a href="#page2">detail</a></li>
　 <li></li>
　 <li></li>
</ul>
</div>

例ol：

<ol data-role="listview">
   <li>list</li>
   <li>list</li>
   <li>list</li>
   <li>list</li>
   <li>list</li>
</ol> 

例aタグ：

<div data-role="content">
<ul data-role="listview">
　 <li><a href="#page2">list</a></li>
　 <li><a href="#page2">list</a><a href="#page2">detail</a></li>
　 <li></li>
　 <li></li>
</ul>
</div>

※li内に2つのリンクを記述すると、1つのリスト項目に2つのリンクを設定できる分割リストも作成できる。

▼分割リストのアイコンを変更する

分割リストで表示するアイコンは、data-split-icon属性で変更できる。
例：

<ul data-role="listview" data-split-icon="gear">

▼分割リストのテーマを設定(カラー)

分割リストではdata-split-them属性を利用してテーマを適用できる。
例:

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

#ref error ：画像URLまたは、画像ファイル名を指定してください。

(リスト　分割リストのテーマを設定(カラー).jpg)

▼角丸のリスト

ul/ol要素に対してdata-inset属性「true」を付けると、角丸の立体的なリストにできる。
例：

<ul data-role="listview" data-inset="true">

▼説明付きのリスト1

見出し要素とp要素などを組み合わせることで説明を表示できる
例：

<ul data-role="listview">
   <li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
   <li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
   <li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
   <li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li> 
</ul> 

#ref error ：ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (リスト　説明付きのリスト1.jpg)

▼説明付きのリスト2

class属性「ui-li-aside」を設定した要素を記述すると、リスト項目の右上に補足的な情報も表示できる
例：

<ul data-role="listview">
   <li>
	<a href="#page2">
		<p class="ui-li-aside">2011年7月20日</p>
			<h1>見出し</h1>
		<p>説明の内容</p>
	</a>
   </li>
   <li>
	<a href="#page2">
		<p class="ui-li-aside">2011年7月20日</p>
			<h1>見出し</h1>
		<p>説明の内容</p>
	</a>
   </li>
   <li>
	<a href="#page2">
		<p class="ui-li-aside">2011年7月20日</p>
			<h1>見出し</h1>
		<p>説明の内容</p>
	</a>
   </li>
</ul> 

▼リストに見出しをつける

li要素にカスタムデータ属性「data-role="list-divider"」を付ける

<div data-role="content">
<ul data-role="listview">
　 <li data-role="list-divider">見出し</li>
　 <li></li>
　 <li></li>
</ul>
</div>

▼見出しのテーマ

例：

<ul data-role="listview" data-dividertheme="a">
   <li data-role="list-divider">見出し</li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li data-role="list-divider">見出し</li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li> 
</ul> 

▼見出しのテーマの変更1（全体）

ul/ol要素にdata-theme属性でテーマを指定できます
例：

<ul data-role="listview" data-theme="e">
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
</ul> 

▼見出しのテーマの変更2（個別）

data-theme属性はul/ol要素の子要素であるli要素にも指定できます。li要素にdata-theme属性を設定すると、個々のリスト項目のテーマを変更できます
例:

<ul data-role="listview">
   <li><a href="#page2">list</a></li>
   <li data-theme="e"><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
</ul> 

▼カウントバブルの追加

リスト内に数値を記述し、class属性「ui-li-count」を付けた要素で包むと、リスト項目の右側にカウントバブルが表示される
※Webサイトの新着情報の件数を表示する場合などに利用できます。
例：

<ul data-role="listview">
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li> 
</ul> 

▼カウントバブルのテーマの変更

ulタグにdata-count-theme属性をつけることで変更できる
例：

<ul data-role="listview" data-count-theme="a">
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li> 
</ul> 

▼画像付きのリスト1

各リスト項目内のimg要素を記述するだけ、img要素で指定した画像は80×80pxに自動的にリサイズされる。
例：

<ul data-role="listview">
   <li><a href="#page2"><img src="thumbnail1.jpg">list</a></li>
   <li><a href="#page2"><img src="thumbnail2.jpg">list</a></li>
   <li><a href="#page2"><img src="thumbnail3.jpg">list</a></li>
   <li><a href="#page2"><img src="thumbnail4.jpg">list</a></li>
   <li><a href="#page2"><img src="thumbnail5.jpg">list</a></li> 
</ul> 

▼画像付きのリスト2

より小さな画像をアイコンのようにして表示したい場合は、class属性「ui-li-icon」を使います。画像が16×16pxで表示されます。
例：

<ul data-role="listview">   
　 <li><a href="#page2"><img src="thumbnail1.jpg" class="ui-li-icon">list</a></li>   
　 <li><a href="#page2"><img src="thumbnail2.jpg" class="ui-li-icon">list</a></li>   
　 <li><a href="#page2"><img src="thumbnail3.jpg" class="ui-li-icon">list</a></li>   
　 <li><a href="#page2"><img src="thumbnail4.jpg" class="ui-li-icon">list</a></li>   
　 <li><a href="#page2"><img src="thumbnail5.jpg" class="ui-li-icon">list</a></li> 
</ul> 

※jQuery Mobileの現在のバージョン（1.0ベータ）では画像が40×40pxにリサイズされ、表示がずれるため、CSSでサイズを指定する必要がある。

サイズ修正例：

<ul data-role="listview">
   <li>
	<a href="#page2">
		<img src="thumbnail1.jpg" class="ui-li-icon" style="max-width:16px;max-height:16px;">list
	</a>
   </li>
   <li>
	<a href="#page2">
		<img src="thumbnail2jpg" class="ui-li-icon" style="max-width:16px;max-height:16px;">list
	</a>
   </li>
   <li>
	<a href="#page2">
		<img src="thumbnail3.jpg" class="ui-li-icon" style="max-width:16px;max-height:16px;">list
	</a>
   </li>
</ul> 

▼検索フィルタ1

jQuery Mobileのリストには、リスト内の項目を絞り込める検索フィルタ機能が用意されています。ul/ol要素にdata-filter属性「true」を追加すると、リストの上部に検索フォームが配置され、検索キーワードを入力すると一致する項目だけが表示されます。
例：

<ul data-role="listview" data-filter="true">
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
</ul> 

▼検索フィルタ2

検索フォームのプレースホルダー（初期値）には「Filter items...」という値が入っています。この値は、data-filter-placeholder属性で変更できます。
例：

<ul data-role="listview" data-filter="true" data-filter-placeholder="キーワードで絞り込み">
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
</ul> 

●ヘッダーのカスタマイズ

▼Backボタンの表示1

ページ要素（data-role="page"）にdata-add-back-btn属性「true」を指定すると、他のページから遷移してきたときに自動的に「戻るボタン」を表示します
例：

<div data-role="page" id="page2" data-add-back-btn="true"> 

▼Backボタンの表示2（ラベルの変更）

「戻るボタン」は、デフォルトでは「back」というテキストが表示されます。ボタンのラベルを任意のテキストに変更するには、ページ要素にdata-back-btn-text属性で表示したいテキストを指定します
例：

<div data-role="page" id="about" data-theme="b" data-back-btn-text="戻る">

▼任意のボタンを表示1

data-role属性「header」を指定した要素内にa要素を記述すると、ボタンとして表示されます
例：

<div data-role="header">
   <a href="#page2">home</a>
　 <h1>ページ1</h1>
   <a href="#page2">save</a>
</div> 

▼任意のボタンを表示2（表示位置）

1つ目のa要素がヘッダーのテキストの左側に、2つ目のa要素が右側に表示されます。ボタンを必ず右側に表示したい場合は、class属性「ui-btn-right」を指定します。
例：

<div data-role="header">
　　<h1>ページ1</h1>
　　<a href="#page2" class="ui-btn-right">save</a>
</div>

●フッターのカスタマイズ

▼任意のボタンを表示

フッター内に配置したa要素も自動的にボタンに変換されます。ただし、初期値では余白などが反映されていないため、フッター要素の内側に新たな要素を作成し、class属性「ui-bar」を指定します。
例：

<div data-role="footer" class="ui-bar">
   <div class="ui-bar">
     <a href="#page2">Remove</a>
     <a href="#page2">Add</a>
     <a href="#page2">Up</a>
     <a href="#page2">Down</a>
   </div> 
</div> 

●ヘッダー/フッターのカスタマイズ

▼ナビゲーションバーの追加

data-role属性「navbar」を利用するとヘッダーやフッターにナビゲーションバーを追加できる。
ナビゲーションバーに表示するボタンは、data-role属性「navbar」を付けた要素の内側にリスト（ul/li要素）で記述。
※ナビゲーションバーはボタンの数（li要素の数）で均等に分割され、数が増えるにつれてボタンは小さくなります、
ボタンの数（li要素の数）が6つ以上になると1行に2列ずつ、複数行に分割して表示
例1ヘッダ：

<div data-role="header">
   <h1>ページ1</h1>
   <div data-role="navbar">
     <ul>
       <li><a href="#page2">One</a></li>
       <li><a href="#page2">Two</a></li>
     </ul>
   </div> 
</div> 

▼固定配置1

data-position属性「fixed」を追加する
例：

<div data-role="header" data-position="fixed">
   <h1>ページ1</h1> </div> 
<div data-role="content">
   <ul data-role="listview">
     <li><a href="#page2">list1</a></li>
     <li><a href="#page2">list2</a></li>
     <li><a href="#page2">list3</a></li>
     (中略)
     <li><a href="#page2">list8</a></li>
     <li><a href="#page2">list9</a></li>
     <li><a href="#page2">list10</a></li>
   </ul>
 </div> 
<div data-role="footer" data-position="fixed">
   <h4>フッター1</h4>
</div> 

▼固定配置2（共通フッターの使用）

data-position="fixed" でフッターを固定しているときにdata-id属性を設定すると、共通フッターを使用できます。
data-id属性にはID名（フッターID）を指定し、共通フッターを使用したいページには同じフッターIDをフッターに記述します。
※共通フッターとは、サイト内の各ページに共通して表示されるフッターのことで、ページ遷移時にもアニメーションせずに固定され、常にページ下部に表示されます。
例：

<div data-role="footer" data-position="fixed" data-id="フッターID">
　<h4>フッター</h4>
</div>

▼固定配置3（フルスクリーンモード）

ヘッダー／フッターを固定配置した状態（data-position="fixed"）でページ要素にdata-fullscreen属性「true」を指定すると、フルスクリーンモードを利用できます。
※フルスクリーンモードとは、ヘッダー／フッターがコンテンツの上に半透明で重なって表示され、コンテンツ領域をタップすると非表示になります（もう一度タップすると再表示されます）。
例：

<div data-role="page" id="page1" data-fullscreen="true">
     <div data-role="header" data-position="fixed">
       <h1>ページ1</h1>
     </div>
     <div data-role="content">
        <h2>小見出し</h2>
        <p>本文</p>
        <h2>小見出し</h2>
        <p>本文</p>
     </div>
     <div data-role="footer" data-position="fixed">
       <h4>フッター1</h4>
     </div>
</div>