jQueryMobileの戻るボタン
jQueryMobileで現在の画面に遷移してきた前の画面に戻るボタンを実装します。
divタグのページにdata-add-back-btn=""を追加します。

<div data-role="page" data-add-back-btn="true"> </div>
バージョンによっては表示されないようで、以下のバージョンだと表示させることができました。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
以下、実装例です。

<div id="page1" data-role="page" data-theme="b" data-add-back-btn="true">
  <div class="header" data-role="header">
    <h1>jQuery Mobile</h1>
  </div>
    <div class="content" data-role="content">
      <a href="#page" rel="true" data-role="button">サンプルボタン1</a>
    </div>

  <div class="footer" data-role="footer">
    <h1>スマホサイト</h1>
  </div>
</div>

<div data-role="page" id="page" data-theme="b" data-add-back-btn="true"> 
  <div data-role="header">
    <h3>jQuery Mobile</h3>
  </div> 
  <div data-role="content">
    サンプルサイト
  </div> 
  <div class="footer" data-role="footer">
    <h1>スマホサイト</h1>
  </div>
</div>


戻るボタンのDEMOです。

戻るボタンの文字列を変更する
jQueryMobileのBackボタンの文字列を変更するには、divタグにdata-add-back-btn-text="XXX"を追加します。
が、実機で確認しても文字列は変更されませんでした。

<div id="page1" data-role="page" data-theme="b" data-add-back-btn="true">
  <div class="header" data-role="header">
    <h1>jQuery Mobile</h1>
  </div>
    <div class="content" data-role="content">
      <a href="#page" rel="true" data-role="button">サンプルボタン1</a>
    </div>

  <div class="footer" data-role="footer">
    <h1>スマホサイト</h1>
  </div>
</div>

<div data-role="page" id="page" data-theme="b" data-add-back-btn="true" data-add-back-btn-text="戻る"> 
  <div data-role="header">
    <h3>jQuery Mobile</h3>
  </div> 
  <div data-role="content">
    サンプルサイト
  </div> 
  <div class="footer" data-role="footer">
    <h1>スマホサイト</h1>
  </div>
</div>


戻るボタンの文字変更のDEMOです。

Back to top

Information