モバイル版チェックイン予定表(1)

以前作ったPC用のチェックイン予定表の「モバイル版」をjQuery Mobileで作成する。データストアのアクセス方法は同じだが、画面の作り方が異なる。現在検討中の画面は以下のとおりで、いわゆる「一覧表－明細」の形式になっている。

(1)メニュー (#pgPlanView)

(2)予定タグの一覧 (#pgPlanList)

(3)(選択したタグがついている)予定の一覧 – 1日の予定 (#pgPlan)

(4)予定の詳細 – 1件の予定 (#pgSpot)

(2)以降の画面はデータストアの内容によりコードで動的に生成する。

• 画面を用意する

jQuery Mobileでは、複数の画面を1つのHTMLファイルに記述する。具体的には、data-role=”page”を指定してページを作成し、ページ内にヘッダ(data-role=”header”)・本文(data-role=”content”)を記述する。(現時点ではフッタは記述していない。) 画面(2)(3)のHTMLは以下のとおりで、HTMLでは画面の「枠」だけを用意するイメージ。

<!-- HTML -->
<div data-role="page" id="pgPlanList">
  <div data-role="header"><h2>Plan List</h2>
  </div>
  <div data-role="content">
    <ul data-role="listview" id="lvTagPlan" data-inset="true"></ul>
  </div>
</div>

<div data-role="page" id="pgPlan">
  <div data-role="header" ><h2>Plan</h2>
  </div>
  <div data-role="content">
    <ul data-role="listview" id="lvPlan" data-inset="true"></ul>
  </div>
</div>

• 画面を生成するコードをイベントハンドラに記述する

各画面の内容は、データストアの中身により動的に変化するので、表示関連のイベントを捕捉して画面を生成する。今のところ以下のイベントを使っている。
・pagebeforecreate：ページが生成される前
　ヘッダに戻るボタン・ホームボタンを追加する。
・pageinit：ページが初期化されるとき(基本的に初回のみ発生する)
　ボタンなどのイベントハンドラを追加(定義)する。
・pagebeforeshow：ページが表示されるとき
　データストアにアクセスし、画面に表示すべきデータを取得する。
例えば、｢予定タグの一覧」画面(#pgPlanList)のコードは以下のとおり。

// JavaScript
$(document).on('pageinit', '#pgPlanList', function(e){
  $(this).on('click', '#lvTagPlan li', function(){ // クリックイベント
    var idx = $('#lvTagPlan li').index(this);  
    loadPlanM(gTagPlan[idx].tag_key);
  });
});
$(document).on('pagebeforeshow', '#pgPlanList', function(e){
  loadTagPlanM(); // データストアにアクセスし、画面を生成
});