jQuery移動后退按鈕未顯示在第一頁上

Question

我有一個寫有的應用程序：

jQuery 1.11.1 jQuery Mobile 1.4.5 Cordova 4.3.0

我的index.html看起來像

<div data-role="page" id="id1">

  <div data-role="header" data-add-back-btn="true" style="height: auto">
      <h1>Page 1</h1>
  </div>

  <div data-role="content">
  </div>
</div>

<div data-role="page" id="id2">

  <div data-role="header" data-add-back-btn="true" style="height: auto">
      <h1>Page 2</h1>
  </div>

  <div data-role="content">
  </div>
</div>

。 。 。

  <div data-role="header" data-add-back-btn="true" style="height: auto">
      <h1>Page X</h1>
  </div>

  <div data-role="content">
  </div>
</div>

我有onLoad（）和onDeviceReady（）

當我的應用啟動時，出現啟動畫面，然后

<div data-role="page" id="id1">

顯示器。 但盡管有data-add-back-btn =“ true”，但它沒有后退按鈕

什么時候

<div data-role="page" id="id2">

顯示它沒有后退按鈕。

我不明白怎么了。 我是否在jquery mobile准備好顯示后退按鈕之前顯示第一頁？

Answer 1

您在首頁上不能有返回按鈕。

重點是什么？

有一種解決方法，創建第三頁，將其稱為虛擬頁面。 將其清空並使其排成一行。 在pagecontainercreate上（即使您正在使用舊的頁面事件，也可以使用pagecreate）以編程方式將頁面更改為＃id1。 這樣，您甚至都不會注意到虛擬頁面，而您現在的第二個頁面將有一個后退按鈕。

工作示例： http : //jsfiddle.net/4y7mav4a/

HTML

    <div data-role="page" id="hidden">

    </div>

    <div data-role="page" id="id1">

      <div data-role="header"  data-add-back-btn="true" style="height: auto">
          <h1>Page 1</h1>
      </div>

      <div data-role="content">
          <a href="#id2">Go to page 2</a>
      </div>
    </div>

    <div data-role="page" id="id2">

      <div data-role="header" data-add-back-btn="true" style="height: auto">
          <h1>Page 2</h1>
      </div>

      <div data-role="content">
      </div>
    </div>

JavaScript的

$(document).on('pagecreate', '#hidden', function(){ 
    $(":mobile-pagecontainer").pagecontainer("change", "#id1");        
});

Answer 2

<div data-role="page" id="id1">

  <div data-role="header" data-add-back-btn="true" style="height: auto">
      <h1>Page 1</h1>
  </div>

我有一個類似的問題，我通過添加此代碼解決了

<a href="#page1" data-icon="arrow-l">Back</a>, 

嚴厲之后：

<div data-role="header" data-add-back-btn="true" style="height: auto">

像這樣：

<div data-role="header" data-add-back-btn="true" style="height: auto">
      <a href="#page1" data-icon="arrow-l">Back</a>
<h1>Page 1</h1>
  </div>

有了這個，您可以在任何地方有一個后退按鈕，唯一的問題是您必須放置一個特定的頁面，並且可以擦除data-add-back-btn =“ true”

我希望這可以幫助您或其他有此需要的人