jQuery Mobileのナビゲーションバーを使う(2) – 変数との関連付け -

前記事に引き続いて、ナビゲーションバーを使う。今回は、これを
・クリック(タップ)アクションを変数と結びつける
・各ページで状態(値)を保持する(選択している曜日のボタンをアクティブにする)
方法を考える。

作成したナビゲーションバーは、以下のように「各項目共通のクラス(clsLineMode)」「項目ごとに固有の値(*)」が設定されている。
(*)カスタムデータ属性と呼ばれるもの。data-***の形式を持つ。

<!-- HTML -->
<div data-role="navbar">
  <ul>
  <li><a href="#" class="clsLineMode" data-linemode="Weekday">Weekday</a></li>
  <li><a href="#" class="clsLineMode" data-linemode="Saturday">Saturday</a></li>
  <li><a href="#" class="clsLineMode" data-linemode="Holiday">Holiday</a></li>
  </ul>
</div>

• クリックイベントを捕捉し、変数と関連付ける
  ナビゲーションバーの「li要素に発生するクリックイベント」を、共通のクラスを使ってまとめて処理する。

  // JavaScript
  // 曜日(平日・土曜・休日)を表わす変数
  var gCurLineMode;
  
  $('div[data-role="navbar"] .clsLineMode').live('click', function(){
    gCurLineMode = $(this).data('linemode');
  });
  

  カスタムデータ属性の値は、jQuery では $(セレクタ).data(データ属性名) の形式で取得することができる。上記の例では、data-linemode=”Weekday” が設定されている要素をクリックすることで、変数gCurLineMode には ‘Weekday’ の値がセットされる。
  これにより、「どの曜日を選択したか」と変数gCurLineMode の値が同期するようになった。

• ページ表示時に選択されているボタンをアクティブにする
  ボタンをアクティブにするにはクラス”ui-btn-active”を指定する。jQuery Mobileで適切なメソッドが見つからなかったので、以下のように、自前でこのクラス追加/削除することで対応する。

  // JavaScript
  var gCurLineMode = 'Weekday';
  
  $('div[data-role="page"]').live("pagebeforeshow", function(){
    // 全てのリンクボタンをいったん非アクティブにする (クラスを利用)
    //  3つの<li>要素に共通にセットされているクラスclsLineModeを使う
    $(this).find('div[data-role="navbar"] .clsLineMode').removeClass("ui-btn-active");
    // 選択されている曜日ボタンをアクティブにする (data属性を利用)
    //  Weekday であれば、data-linemode="Weekday" がセットされている<li>要素を選択
    $(this).find('div[data-role="navbar"] [data-linemode="' + gCurLineMode  + '"]').addClass("ui-btn-active");
  });
  

• 実行例

最初の画面でSaturdayを選択

次画面でもSaturdayが選択されている