![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
iPhone関連 > iPhoneサイト構築 > jQuery Mobile を使用してスマホサイト構築 jQuery Mobile を使用してスマホサイト構築 †※TODO：書きかけの記事 基本的な使い方は、以下のサイトを参照して構築するものとして、 《目次》 ページの基本構成 †デザイン面で重要になるのは、data-role などの data 属性 また data-role="page" の要素は１ページ内に複数持つ事ができ、非同期通信による部分読み込みによって、 <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属性 †また、data-role の他にも、体裁を整えたり、挙動を変える為の data-* 属性が用意されている。
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; }
などを記述しても、余白は小さくならない。 テキストボックスの余白を無くすには、以下のように記述する。 .ui-input-text { margin : 0px !important;}
特定のテキストボックスの余白だけ調整したい場合は、以下のようにdiv等で括って、 <style>
#text1_area .ui-input-text { margin : 0px !important;}
</style>
<div id="text1_area">
<input type="text" id="text1" name="text1" value="" >
</div>
このように、自動装飾後のHTMLがどうなっているかを把握しておかないと、余白調整すらままならない。 ◆解決方法 イベント処理 †用意されているイベント †様々なイベントが用意されているが、とりあえず以下をおさえておけば大抵の事はできる。
イベントの捕捉方法 †data-ajax=falseでない限り、headタグ内に記述したJavaScriptは一度しか読み込まれないので、全ページで同じものを記述する。 <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による捕捉でも <head>
<script>
$(document).on("pageshow", function(){
alert("test1");
});
$(document).on("pageshow", function(){
alert("test2");
});
</script>
<head>
data-role=page 配下にイベント捕捉を記述した場合、 <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>
<script>
$(document).on("pageshow", "#page1", function(){ // この書き方は live と等価
// page1の初期処理
});
</script>
<head>
動的に追加したHTMLに対して装飾を行う †動的に追加した要素は、jQueryMobileによるHTML装飾が行われない為、自分で装飾を指示する必要がある。 <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>
|
