html - jQuery Mobile - 带有后退按钮的永久工具栏

Question

编辑

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

---

我正在处理一个具有固定页眉和页脚的元素。只是通过单击应用程序更改内容。现在我想在标题中添加一个后退按钮:

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

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

那么，我怎样才能使标题内的后退按钮在每个页面上都可以点击呢？

编辑

所以标题不关心我在里面放了什么样的按钮。无论我选择什么按钮，或者我将什么属性添加到我的 <a></a>它不可点击。所以我试着再次运行 GapDebug，按下“检查”按钮，然后点击我的后退按钮，它从错误的页面中选择了我的代码。

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.