CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

kida

「jQuery Mobile」を使ってみた

by kida on

昨年末、正式版であるバージョン1.0が公開されたばかりの「jQuery Mobile」ですが、早くも次のバージョンが近いうちにリリースされるようです。
(公式サイトの情報はこちら(英語))

今回は実際にサンプルサイトを作ってみたので、ご紹介しようと思います。

サンプルページ

PCからはこちら

PCで確認される場合はブラウザのSafari 5~を使用して確認するとiPhoneに近い動作で確認する事が可能です。

このサンプルサイトは「jQuery Mobile」のみでどこまで表現できるかを
考えて作成していますのでスタイルはほとんど調整していません。

以下にサイトを構築する際に基本的となる「ナビゲーション」「リスト」「ボタン」「フォーム」の4つをご紹介します。

ナビゲーション

1カラム


 <div data-role="navbar"> 
  <ul> 
   <li><a href="#">中央</a></li> 
  </ul> 
 </div>

divのdata-role属性に“navbar”を指定することでリストの表示になります。

2カラム


 <div data-role="navbar" data-grid="a"> 
  <ul> 
   <li><a href="#">右</a></li> 
   <li><a href="#">左</a></li> 
  </ul> 
 </div>

divのdata-role属性に“navbar”を指定するのは同じですが、2カラムの時はdata-gridに属性に“a”を指定する必要があります。

3カラム

	
 
 <div data-role="navbar" data-grid="b"> 
  <ul> 
   <li><a href="#">右</a></li> 
   <li><a href="#">中央</a></li> 
   <li><a href="#">左</a></li> 
  </ul> 
 </div>

divのdata-role属性に“navbar”を指定するのは同じですが、3カラムの時はdata-gridに属性に“b”を指定する必要があります。

4カラム


 <div data-role="navbar" data-grid="c"> 
  <ul> 
   <li><a href="#">右</a></li> 
   <li><a href="#">右2</a></li> 
   <li><a href="#">左2</a></li> 
   <li><a href="#">左</a></li> 
  </ul> 
 </div> 

divのdata-role属性に“navbar”を指定するのは同じですが、4カラムの時はdata-gridに属性に“c”を指定する必要があります。

5カラム


 <div data-role="navbar" data-grid="d"> 
  <ul> 
   <li><a href="#">右</a></li> 
   <li><a href="#">右2</a></li> 
   <li><a href="#">中央</a></li> 
   <li><a href="#">左2</a></li> 
   <li><a href="#">左</a></li>  
  </ul> 
 </div> 

divのdata-role属性に“navbar”を指定するのは同じですが、5カラムの時はdata-grid属性に“d”を指定する必要があります。

リスト

通常のリストの書き方

<ul data-role="listview">
 <li><a href="#">北海道</a></li>
 <li><a href="#">青森県</a></li>
 <li><a href="#">岩手県</a></li>
 <li><a href="#">宮城県</a></li>
 <li><a href="#">秋田県</a></li>
 <li><a href="#">山形県</a></li>
 <li><a href="#">福島県</a></li>
</ul>

何も指定していない通常のリストの表示です。
右矢印アイコンはデフォルトこの表示となります。

階層構造のリストの書き方

<ul data-role="listview" data-theme="d"> 
 <li>中部地方
  <ul>
   <li><a href="#">新潟県</a></li>
   <li><a href="#">富山県</a></li>
   <li><a href="#">石川県</a></li>
   <li><a href="#">福井県</a></li>
   <li><a href="#">山形県</a></li>
   <li><a href="#">長野県</a></li>
   <li><a href="#">岐阜県</a></li>
   <li><a href="#">静岡県</a></li>
   <li><a href="#">愛知県</a></li>
  </ul>
 </li>
</ul>

liの中にさらにulを入れる事で自動で階層構造のリストになります。
リストの親階層をタップする事で子階層が別ウィンドウで立ち上がります。

画像有りのリストの書き方

<ul data-role="listview" data-split-icon="arrow-r" data-split-theme="d">
 <li>
  <a href="#"> 
   <img src="images/01.jpg" /> 
   <h3>四国地方</h3> 
   <p>徳島県</p> 
  </a>
  <a href="#" data-rel="dialog" data-transition="slideup">テキスト</a>
 </li>
 <li>
  <a href="#"> 
   <img src="images/01.jpg" /> 
   <h3>四国地方</h3> 
   <p>香川県</p> 
  </a>
  <a href="#" data-rel="dialog" data-transition="slideup">テキスト</a>
 </li>
 <li>
  <a href="#"> 
   <img src="images/01.jpg" /> 
   <h3>四国地方</h3> 
   <p>愛媛県</p> 
  </a>
  <a href="#" data-rel="dialog" data-transition="slideup">テキスト</a>
 </li>
 <li>
  <a href="#"> 
   <img src="images/01.jpg" /> 
   <h3>四国地方</h3> 
   <p>高知県</p> 
  </a>
  <a href="#" data-rel="dialog" data-transition="slideup">テキスト</a>
 </li>
</ul>

リストに画像とテキストの両方を入れた場合、画像は左側、テキストは右側に自動で調整されます。

ボタン

 <a href="#" data-role="button">通常</a>
 <a href="#" data-role="button" data-icon="arrow-l">左矢印</a>
 <a href="#" data-role="button" data-icon="arrow-r">右矢印</a>
 <a href="#" data-role="button" data-icon="arrow-u">上矢印</a>
 <a href="#" data-role="button" data-icon="arrow-d">下矢印</a>
 <a href="#" data-role="button" data-icon="plus">プラス</a>
 <a href="#" data-role="button" data-icon="minus">マイナス</a>
 <a href="#" data-role="button" data-icon="delete">削除</a>
 <a href="#" data-role="button" data-icon="check">チェック</a>
 <a href="#" data-role="button" data-icon="gear">歯車</a>
 <a href="#" data-role="button" data-icon="forward">進む</a>
 <a href="#" data-role="button" data-icon="back">戻る</a>
 <a href="#" data-role="button" data-icon="refresh">リターン</a>
 <a href="#" data-role="button" data-icon="grid">グリッド</a>
 <a href="#" data-role="button" data-icon="star">星</a>
 <a href="#" data-role="button" data-icon="alert">注意</a>
 <a href="#" data-role="button" data-icon="info">ビックリ</a>
 <a href="#" data-role="button" data-icon="home">ホーム</a>
 <a href="#" data-role="button" data-icon="search">虫眼鏡</a>

標準で用意されているアイコン画像の一覧となります。
data-iconに使用するアイコン名を打ち込みますと、その画像が表示されます

特殊なフォーム

スライダー

<input type="range" name="range" id="range" value="0" min="0" max="100"  />

typeをrangeにするとスライダーが表示されます。

スイッチ

<select name="slider" id="slider" data-role="slider">
 <option value="いいえ">いいえ</option>
 <option value="はい">はい</option>
</select> 

typeをsliderにするとスイッチが表示されます。

次回

以上、第2回は「jQuery Mobile」のサンプルサイトをご紹介しました。

サイトの見た目は自分で用意したCSSを用いてデザインを実現しているわけではありません。
全て「jQuery Mobile」でダウンロードしたファイルをhtmlに読み込むだけで実現しています。
ダウンロードしたファイルのみである程度スマートなデザインのサイトが作成できるのも
「jQuery Mobile」の魅力の一つではないでしょうか。

次回は「jQuery Mobile」のモーションの部分等の深い所をご紹介しようと思います。

Subscribe:
pagetop