列車時刻表(7) – 乗車予定画面への遷移(共通フッタの利用)

前記事に引き続いて、乗車予定一覧画面への遷移を追加する。これまでのコーディングで、「列車時刻表画面」「駅時刻表画面」から乗車・下車アクションを実行したタイミングで乗車予定一覧画面に遷移していたが、それ以外の画面からも一覧画面に遷移できるようにする。

• 全画面共通のフッタを用意しリンクボタンを配置する
  コードで共通のフッタを作成し、リンクボタンを配置するために、以下のように全画面共通のイベントハンドラ(ページ生成時にフッタを追加する)を定義する。

  <!-- HTML -->
  <!-- 全ページに空のフッタを定義しておく-->
    <div data-role="footer" data-position="fixed" data-id="fixedFooter">
    </div>
  

  // JavaScript
  $('div[data-role="page"]').live("pagebeforecreate", function(evt){
    var footer = '<button data-role="button" data-icon="grid"
      id="footerTTcommon">Ride</a>';
    $(this).find('div[data-role="footer"]').append(footer);
  }
  

  フッタはあらかじめには同一のidを振っておき、data-position=”fixed” とすることで、全画面共通のフッタになる(ようだ)。リンクボタンも同じidとすることで、どの画面でボタンをクリックしても同じイベントが発生すると思われる。[TODO] イベント要確認
  

• ボタンクリック時のイベントハンドラを定義する

  // JavaScript
  $('#footerTTcommon').live('click', function(){
    if (gRides.length == 0){
    // 乗車予定データが空の場合はダイアログを表示するだけで画面遷移しない。
      mu_openDialogOK('Information', 'No riding data saved.', function(){
        return;
      });
    //乗車データが存在する場合は、予定一覧画面に遷移する。
    } else {
      $.mobile.changePage('#pgTTRide');
    }
  });
  

• 「列車時刻表画面」「駅時刻表画面」からは一旦ダミーページに遷移する
  「列車時刻表画面」「駅時刻表画面」のリンクボタンをクリックした際は、一旦ダミーページ(#pgTTRide0)に遷移して、ダイアログを表示する。乗車･下車アクションの実行が確認できたら、一覧画面(#pgTTRide)に遷移する。