jQuery Mobile を使用してスマホサイト構築 - 闘うITエンジニアの覚え書き

http://jquerymobile.com/
http://dev.screw-axis.com/doc/jquery_mobile/

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

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

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

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

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が確認できる。

用意されているイベント †

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

イベントの捕捉方法 †

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>