読者です 読者をやめる 読者になる 読者になる

ほんじゃら堂

めんどくさい仕事をラクにする作業自動化レシピ集

jQuery MobileでiPhone用Webサイトを作成する

IT系・技術系 Javascript jquery

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以外のイベントで処理するようにしてる。