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">

显示器。但它没有后退按钮，尽管数据添加后退-btn =＆＃34; true＆＃34;

何时

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

显示它有后退按钮。

我不明白什么是错的。我是否在jquery mobile准备好显示后退按钮之前显示第一页？

Answer 1

第一页上没有后退按钮。

重点是什么，指向何处？

有一种解决方法，创建第三个页面，将其称为虚拟页面。把它弄空，然后排成第一线。在pagecontainercreate（或页面创建，即使您正在使用较旧的页面事件）只需以编程方式将页面更改为＃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>

有了这个你可以在任何你想要的地方有一个后退按钮，唯一的问题是你必须放一个特定的页面，你可以删除数据 - add-back-btn =“true”

我希望这可以帮助你或其他有这种需要的人

jquery移动后退按钮不会显示在第一页上

2 个答案:

HTML

的JavaScript