jquery mobile后退按钮不显示在第一页答案

【问题标题】：jquery mobile back button does not display on first pagejquery mobile后退按钮不显示在第一页
【发布时间】：2015-03-19 02:05:01
【问题描述】：

我有一个应用程序编写：

jquery 1.11.1 jQuery移动1.4.5 科尔多瓦 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 准备好显示后退按钮之前显示第一页？

【问题讨论】：

标签： jquery cordova jquery-mobile

【解决方案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");        
});

【讨论】：

我在想点击首页上的后退按钮会退出应用程序。我现在看到第一页上的后退按钮没有多大意义，但是您如何实现用户能够退出应用程序并使其从第一页关闭？退出按钮？

【解决方案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"

我希望这可以帮助您或其他有此需求的人

【讨论】：