iPhone関連 > iPhoneサイト構築 > jQuery Mobile を使用してスマホサイト構築

jQuery Mobile を使用してスマホサイト構築

※TODO:書きかけの記事

基本的な使い方は、以下のサイトを参照して構築するものとして、
当ページでは、特にデザインなどのカスタマイズ方法と、カスタマイズに必要な最低限の情報についてのみ記載する。

《目次》

ページの基本構成

デザイン面で重要になるのは、data-role などの data 属性
jQuery Mobile は指定された data-role などの属性を読み取り、各要素にCSSセレクタの付与などを行い、ページの体裁を整える。

また data-role="page" の要素は1ページ内に複数持つ事ができ、非同期通信による部分読み込みによって、
1枚のHTMLを複数ページであるかのように見せる事ができる。

<html>
<body>
	<div id="page1" data-role="page">
		<div data-role="header">
			ヘッダ領域
		</div>
		<div data-role="navbar">
			ナビゲーションバー領域
		</div>
		<div data-role="content">
			コンテンツ領域
		</div>
		<div data-role="footer">
			フッタ
		</div>
	</div>
	<div id="page2" data-role="page">
		<div data-role="header">
			ヘッダ領域
		</div>
		<div data-role="navbar">
			ナビゲーションバー領域
		</div>
		<div data-role="content">
			コンテンツ領域
		</div>
		<div data-role="footer">
			フッタ
		</div>
	</div>
</body>
</html>

主なdata-role

ナビゲーションバーやフッター、ボタンやリストなどにもそれぞれ data-roleが用意されており、追加したい箇所に
対象のdata-role属性をもつ要素を追加する事で簡単にそれっぽいページを作る事ができる。

data-role内容
pageページ全体用
headerヘッダ領域用
contentコンテンツ領域用
navbarナビゲーションバー用
footerフッター用
sliderフリップスイッチ(selectタグに指定するとフリップスイッチとして表示される)
button
controlgroup
fieldcontain
collapsible開閉式コンテンツ
collapsible-setアコーディオン式コンテンツ(開閉式コンテンツ)

その他の data属性

また、data-role の他にも、体裁を整えたり、挙動を変える為の data-* 属性が用意されている。

data-corners
data-iconhome or delete or plus or arrow-u or arrow-d or check or gear or grid or star or custom or arrow-r or arrow-l or minus or refresh or forward or back or alert or info or search
data-iconposleft or right or top or bottom or notext
data-iconshadowtrue or false
data-inlinetrue or false
data-shadowtrue or false
data-themeswatch letter (a-z)
data-typehorizontal or
data-id
data-position
data-title
data-inline
data-mini
data-shadow
data-theme
data-content-theme
data-ajaxtrue or false
data-dom-cachetrue or false
data-prefetchtrue or false
data-relslide or slideup or slidedown or pop or fade or flip

jQuery Mobile によるHTML装飾

jQuery Mobile が自動的に追加・変更する CSSセレクタや装飾後のHTMLを把握する事で、より細かなカスタマイズを行う事ができる。

例えば、テキストボックスの場合は、以下のように自動装飾される。

素の記述

<input type="text" id="text1" name="text1" value="" >

jQueryMobileによる自動装飾後

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
<input type="text" id="text1" name="text1" value="" class="ui-input-text ui-body-c">
</div>

※その他の自動装飾の例は jQuery Mobileによる自動装飾後のHTML を参照。

ここで、テキストボックスが無駄に多く取る余白(margin)を小さくしたい場合、

#text1 { margin : 0px !important; }

などを記述しても、余白は小さくならない。
余白(margin)が設定されているのは、実際のテキストボックスではなく、.ui-input-text だから。

テキストボックスの余白を無くすには、以下のように記述する。

.ui-input-text { margin : 0px !important;}

特定のテキストボックスの余白だけ調整したい場合は、以下のようにdiv等で括って、
その配下の .ui-input-text に対して余白を指定する。など一手間かける必要がある。

<style>
#text1_area .ui-input-text { margin : 0px !important;}
</style>

<div id="text1_area">
<input type="text" id="text1" name="text1" value="" >
</div>

このように、自動装飾後のHTMLがどうなっているかを把握しておかないと、余白調整すらままならない。

◆解決方法
とはいえ、fieldset で括った場合や、data属性を足した場合など、全ての装飾結果を把握する事は困難。
そこで、google chrome を利用する。
chrome に表示されたページ上で対象の要素を右クリック→ [要素の検証] を選択すると、
素のHTMLではなく、javaScriptによる変更が反映された状態のHTMLが確認できる。

イベント処理

用意されているイベント

様々なイベントが用意されているが、とりあえず以下をおさえておけば大抵の事はできる。

イベント名説明補足
pagebeforecreateそのページがDOMツリーに組み込まれ、jQueryMobileによるHTML装飾が行われる前に起こるイベント。このタイミングで動的にHTML要素を追加・編集すれば、jQueryMobileによるHTML装飾も行われる。
pageinit
pagecreate
そのページが最初に読み込まれた時に実行されるイベント。
pagebeforeshowページを表示する前に実行されるイベント。基本的にページ表示時には毎回実行される。[戻る](data-rel=backなボタン)で戻った場合や、ダイアログを閉じてメインページに制御が戻った際にも実行される為、注意が必要。
pageshowページを表示する際に実行されるイベント。
pagehideページ遷移を行う時に、実行されるイベント。data-ajax=falseのリンクやボタンをクリックした場合は実行されない。
pageremoveページがDOMツリーから削除される時に起こるイベント。DOMツリーに残しておきたいページ等は event.preventDefault() でremoveをキャンセルする事ができる。

イベントの捕捉方法

data-ajax=falseでない限り、headタグ内に記述したJavaScriptは一度しか読み込まれないので、全ページで同じものを記述する。
ページ毎に異なる処理を記述する場合は、ページのidなどを指定するか、data-role=page 配下に処理を記述する。
ただし、data-role=page配下に記述する場合、onでなくbindを使用して記述する。(後述を参照)
ページ毎に異なる処理を記述する場合は、ページのidなどを指定してheadタグ内に記述する。
※data-role=page 配下にも書けるが初期化に限っては headタグ内の方が良さげ。(後述の注意点を参照。)

<head>
<script>
$(document).on("pageshow", function(){
 // 全ページで行う初期表示処理
});
$(document).on("pageshow", "#page1", function(){
 // page1 のみで行う初期表示処理
});
</script>
</head>
<body>
<div id="page1" data-role="page">
<script>
$(document).bind("pagehide", "#page1", function(){
 // page1 のみで行うページ遷移前処理
});
</script>
</div>
</body>

イベントの捕捉時の注意点

headタグ内にイベント捕捉を記述した場合は、onによる捕捉でもbindによる捕捉でも
同一イベントに対する記述がある場合は、それら全てが実行される。
例えば、以下の例では 2回alertが表示される。

<head>
<script>
$(document).on("pageshow", function(){
 alert("test1");
});
$(document).on("pageshow", function(){
 alert("test2");
});
</script>
<head>

data-role=page 配下にイベント捕捉を記述した場合、
bindによるイベント捕捉は上書きされるが、on によるイベント捕捉は上書きされずに追加される。
例えば以下の例では、このページを何度表示しても「bindによる捕捉」は一回しか表示されないが、
「onによる捕捉」はページにアクセスする度に表示回数が増えていく。

<div id="page1" data-role="page">
<script>
$(document).on("pageshow", "#page1", function(){
 alert("onによる捕捉");
});
$(document).bind("pageshow", "#page1", function(){
 alert("bindによる捕捉");
});
</script>
<div>

jQuery 1.7b1 以降は bind や live、delegate で書いていた所は全て on で書けるので(onが推奨らしい)
headタグ内で 対象ページのIDを指定して on でイベント捕捉するのが良いと思われる。
※jQuery 1.9 になると liveは無くなっているので、liveで書いていた所は全て on で記述するように変更する必要がある。

<head>
<script>
$(document).on("pageshow", "#page1", function(){     // この書き方は live と等価
 // page1の初期処理
});
</script>
<head>

動的に追加したHTMLに対して装飾を行う

動的に追加した要素は、jQueryMobileによるHTML装飾が行われない為、自分で装飾を指示する必要がある。
※ただし pagebeforecreate 時に追加した要素は装飾されるので、個別に装飾指示をしなくても良い。

<div id="#myDiv1"></div>
<script>
$(document).on("pageshow", "#page1", function(){
    // 追加/変更した要素の親要素に対してcreateを実行する
    var btn = "<input type=\"button\" value=\"動的に追加したボタン\" />";
    $("#myDiv1").html(btn).trigger("create");
    //$("#myDiv1").append(btn).trigger("create");
});
</script>

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-02-25 (月) 04:55:54 (2720d)