jQuery 移动 - 带有后退按钮的永久工具栏

Question

编辑

Fiddle 那个问题：https://jsfiddle.net/9k449qs2/ - 调试 fiddle 并尝试 select header 用你的选择器。您将无法这样做，它会在您每次点击时 select 显示整个页面。

我正在处理一个具有持久 header 和页脚的项目。只是通过点击应用程序更改内容。现在我想在 header 中添加一个后退按钮，我用的是：

<header id="headerMain" data-position="fixed" data-role="header">
    <a href="#" data-rel="back">
        <div class="backButton">GO BACK</div>
    </a>
</header>

我在 header 之后的其余代码如下所示：

<div data-role="page" id="pageMain">
    <div class="content gray">
        <a href="#checkConnection">adfjsöalfjasödf</a>
    </div>
</div><!-- pageMain end -->

<footer id="footerMain" data-position="fixed" data-role="footer">
    Footer
</footer>


<div data-role="page" id="checkConnection">
    <div class="content gray">
        <button id="checkConnectionState" class="button" onclick="CTFNetworkState()">Check your Connection</button>
        <a href="#checkBattery">
            <button id="checkBatteryState" class="button">Check your Battery</button> 
        </a>
    </div>
</div> <!-- checkConnection end -->

<div data-role="page" id="checkBattery">
    <div class="content gray">
        <p>Just plug your device and you'll get information about your battery state.</p>
    </div>
</div> <!-- checkBattery end -->

所以一切正常，过渡等等。但我无法让后退按钮工作。他不可点击。每个页面上的 header 都不能以任何形式点击。如果我使用 gapDebug 调试它并单击 header，GapDebug 标记 Pagecontainer 而不是 header.

那么，如何让 header 中的后退按钮在每个页面上都可以点击？

编辑

所以 header 不关心我在里面放了什么样的按钮。无论我选择什么按钮，或者我向 <a></a> 添加什么属性，它都不可点击。所以我再次尝试运行 GapDebug，按下 "Inspect" 按钮，然后点击我的后退按钮，它 select 告诉我错误的页面代码。

Answer 1

所以我找到了解决方案。问题是，不是持久工具栏的文档帮助了我，而是外部工具栏的文档帮助了我。

只需添加

$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
});

在您的 <script></script> 标签内，一切正常。发生这种情况 Because these toolbars are not within the page they will not auto initalize. You must call the toolbar plugin yourself.

jQuery 移动 - 带有后退按钮的永久工具栏

jQuery Mobile - Persistent Toolbars with backbutton

html

css

jquery-mobile

cordova

single-page-application