jQuery Mobile
http://jquerymobile.com/
いろいろはまったので、メモ。
バージョンは 1.0 ALPHA 2。
page毎にHTMLを分けて作成する
これは好みだと思うのだけど、URL直指定でそれぞれのページを呼び出せたりするようにするなら、分けた方が簡単な気がした。
構成としては、下記のような形にしてる。
<html> <head> <!-- 全ページ共通のリソース読み込み --> <link rel="stylesheet" type="text/css" href="sample_base.css" /> <script type="text/javascript" src="sample_base.js"></script> </head> <body> <div data-role="page" class="user-home-page"> <!-- このページ専用のリソース読み込み --> <link rel="stylesheet" type="text/css" href="sample_user_home.css" /> <script type="text/javascript" src="sample_user_home.js"></script> <!-- ページレイアウト定義 --> <div data-role="header"> </div> <div data-role="content"> </div> <div data-role="footer"> </div> </div> </body> </html>
jQuery Mobile はページ遷移時に遷移先の[data-role="page"]なタグだけを読み込むらしく、pageタグの外で定義されたcssやjsは読み込んでくれないので、pageタグ内でページ固有のリソースを読み込むようにしてる。
最初にURLを指定して呼び出したページのみ、完全なHTMLとして読み込んでくれるようなので、各ページを上記のような形にしておくことで直URL指定とページ遷移の両方に対応できるらしい。
ただ、ドキュメントを読んだところでは、JSやCSSについては1つにまとめておいて、表示するページ毎に処理を切り替えるのがオススメらしい。
pageタグの名前定義にclassを使っているけど、これはID属性が定義されているとページ遷移で呼び出した時にjQuery MobileがdivタグでラップしてIDを別途つけちゃうから。これをされるとページ遷移時とURL直指定時とでDOM構造が変わって色々面倒なのでclassを使用する。ドキュメントにも「classで指定すりゃいいよ」的なことが書いてあった。
ページ初期化処理
ページ遷移時にJSで初期化処理を行ないたい時は、$(document).ready(function () {}) ではなく、$(".ページクラス").live("pagecreate", function () {}) を使う。readyは最初のページ表示時点で呼び出し済みなので、2ページ目以降では呼び出されないっぽい。
$(".home-page").live("pagecreate", function () { var page = $.homePage(); });
formタグに設定されたlive submitイベントが強敵
formタグにはあらかじめliveなsubmitイベントのハンドラが設定されていて、submitするとajax処理でページ遷移しようとしちゃう。
$('form').live("submit", function () { ... });
な感じで定義されてるので、特定のフォームのみsubmit処理をしないようにしたくてもうまくいかなかった。dieしたら他のページのフォームが効かなくなるし。設定（$.mobile.ajaxFormsEnabled）で無効にした場合もやっぱり全フォームの送信処理が効かなくなっちゃう。
これに関してはまだ解決策は見つかっておらず、フォームを送信したくない場合はsubmit以外のイベントで処理するようにしてる。
