jQuery Mobileのナビゲーションバーを使う(1)

jQuery Mobileのナビゲーションバーを使ってみる。その名のとおり、本来はヘッダーやフッター内に配置されるページ遷移用のバーだが、
・位置を固定できる(スクロールしても常に表示される)
・値を保持できる(複数のページに配置し、ページ遷移しても同じ値を持てる)
性質を生かし、時刻表の「曜日選択」に使ってみる。

• ナビゲーションバーの基本形
  data-role=”navbar” を指定し、li要素を定義すると各要素がバーのリンクボタンになる。遷移先はa要素で指定する。また、class=”ui-btn-active” を指定することで、そのボタンがアクティブな表示になる。(デフォルトテーマでは黒が青に変わる。)

  <!-- HTML -->
  <div data-role="navbar">
    <ul>
      <li><a href="a.html" class="ui-btn-active">One</a></li>
      <li><a href="b.html">Two</a></li>
    </ul>
  </div>
  

• ヘッダー・フッターを固定する
  data-position=“fixed” を指定することで、ヘッダーやフッターは「固定モード」になり、スクロールしても常に表示されるようになる。

  <!-- HTML -->
  <div data-role="page" id="pgTTMain">
    <div data-role="header" data-position="fixed"><h1>TimeTable Main</h1></div>
    <div data-role="content">...</div>
  </div>
  

• ナビゲーションバーをコードで追加する
  各ページで共通にしつつ、同じようなHTMLを静的に記述するのを避けるために、ページ生成時(pagebeforecreateイベント発生時)に、コードでナビゲーションバーを追加する。

  // JavaScript
  $('div[data-role="page"]').live("pagebeforecreate", function(evt){
   var headerBack = '', headerHome = '', headerNavbar = '';
   headerNavbar = '<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>';
   // 途中省略
   // ヘッダーにナビゲーションバーを追加
   $(this).find('div[data-role="header"]').append(headerBack + headerHome + headerNavbar);
  

  今回は、ページ遷移には使わないので、リンク先には’#'を指定している。

• 実行結果