jQuery Mobile が、Beta1 がリリースされて、ようやく使ってみる気持ちが湧いてきた。
data-role でページ遷移後の Back ボタンの表示
これは、Beta1 から、data-add-back-btn="true" という属性を書くのだが、
ヘッダを書く、<data-role="header" > ではなく、、
子ページ毎の、<div data-role="page" > に書かなければならない。
書かないとボタンが出てこない！
<div data-role="page" id="index" data-theme="b">
<div data-role="header">
<h1>ヘッダ－タイトル</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Menu</li>
<li>
<a href="#sampleA"><h3>サンプルＡ</h3></a>
</li>
<li>
<a href="#sampleB"><h3>サンプルＢ</h3></a>
</li>
</ul>
</div>
<div data-role="footer">
<h4>フッタ</h4>
</div>
</div>
<div data-role="page" id="sampleA" data-theme="b" data-add-back-btn="true">
<div data-role="header">
<h1>ヘッダ</h1>
</div>
<div data-role="content">
<h3>サンプルＡコンテンツ</h3>
<p>aaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div data-role="footer">
<h4>フッタ</h4>
</div>
</div>
<div data-role="page" id="sampleB" data-theme="b" data-add-back-btn="true">
<div data-role="header">
<h1>ヘッダ</h1>
</div>
<div data-role="content">
<h3>サンプルＢコンテンツ</h3>
<p>bbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
<div data-role="footer">
<h4>フッタ</h4>
</div>
</div>
====================
Beta1 リリースドキュメントに気づかないと、、、
以下のように書くはめになる。。
<div data-role="page" id="sampleA" data-theme="b">
<div data-role="header">
<a href="#" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-b" data-rel="back" data-icon="arrow-l" data-theme="b">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Back</span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
</span>
</a>
<h1>ヘッダ</h1>
</div>
こんなことは、避けるべきで、、
data-add-back-btn="true" をかくべきである。
