[jQuery mobile]戻るボタンを実装

これも前回のお話になるのですが、ヘッダーを表示する方法について書きました。

で、今度はページ遷移したときに、iOSなどで見かけるヘッダーの「Back」ボタンの実装方法について調査しました。

jQuery mobileの公式サイトではわからなかったので、jQuery Mobile リファレンス的なものを参考にしたところ、data-add-back-btn属性をtrueに設定する必要があるようだ。

<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back"> <div data-role="header" data-position="inline" class="ui-header ui-bar-a" role="banner"> <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Page title 002</h1> </div> <div data-role="content"> hello world </div> </div>

ただし、注意点として、data-role属性がpageのdivタグに設定するのであって、data-role属性がheaderのところに設定してもうまくいかない。

よって、下のパターンではダメなんですな。

<div data-role="page"> <div data-role="header" data-position="inline" class="ui-header ui-bar-a" role="banner" data-add-back-btn="true" data-back-btn-text="Back"> <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Page title 002</h1> </div> <div data-role="content"> hello world </div> </div>

これは、気をつけないと、結構、間違えそうだ。