jQuery Mobile でヘッダーにボタンを表示する

今回調べたjQuery Mobileのヘッダに関する覚え書き。ヘッダ(data-role=”header”内)に’a要素’を記述すると自動的にボタンが生成される。リンクが1つのときはヘッダの左端にボタンが、2つ目のリンクに対しては右端にボタンが配置される。

• 戻るボタンを実装する

<!-- HTML -->
<div data-role="header"> 
  <h1>header title</h1> 
  <a href="" data-rel="back">Back</a> <!-- hrefの内容は無視される -->
</div>

‘data-rel=”back”‘を指定すると、hrefの内容に関わらず「戻る」ボタンが生成される。ラベルを省略すると’Back’が表示される。

• ホームボタンを実装する

<div data-role="header"> 
  <h1>header title</h1> 
  <a href="#home" data-icon="home">Home</a> <!-- '#home'は遷移先のID(やURL) -->
  <!-- data-icon="hoge" でアイコンを指定する -->
  <!-- class="ui-btn-right" でアイコンを右端に表示する -->
  <!-- data-iconpos="notext" でアイコンだけのボタンにする -->
</div>

アイコンの一覧は、ここなどで確認できる。

• ヘッダ/フッタを共通化する

生成するボタンを全てのページで共通にしたい場合は、コードで対応する方法がある。具体的には、jQuery Mobileの「ページ」が生成されるタイミングで、ボタンを表示するHTMLを追加することで実現できる。ページ生成のタイミングは、jQuery Mobile の pagebeforecreateイベントを使って捕捉する。

// JavaScript
$('div[data-role="page"]').live("pagebeforecreate", function(evt){
  var headerButtons = '<a href=...></a>';
  $(this).find('div[data-role="header"]').append(headerButtons);
});

生成しようとしているページが特定のページ(例えば#pgPlanViewであるかは、以下のように調べられる。この方法で「トップページには戻るボタンを作成しない」などが実現できる。

// JavaScript
if ($(this).attr('id') == 'pgPlanView') {
  // ...
}