Question

我需要使用this technique强制刷新。当我导航到新页面时，jQM在我的标题中正确添加了一个后退按钮。但当我回到第一页时，后退按钮错误地出现。是否可以有条件地创建后退按钮？我尝试手动创建一个后退按钮，并根据URI中的参数有条件地隐藏它，但似乎一旦按钮出现，我再也无法隐藏它。

编辑：这是一些演示此问题的代码。当您返回第1页时，它不仅不会隐藏自定义后退按钮，而且当您在第2页时它不会隐藏“第1页”内容，反之亦然。似乎一旦显示出某些东西就无法重新隐藏。

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script>
            var backButtonVar = null;
            var page1Var = null;
            var page2Var = null;
        </script>
    </head>

    <body>
        <div data-role="page" data-add-back-btn="false">
            <div data-role="header">
                <h1>Test</h1>
                <a id="backButton" data-role="button" data-direction="reverse" data-rel="back" data-icon="arrow-l" data-iconpos="left">MyBack</a>
            </div>

            <div id="page1" data-role="content">
                <a href="index.html?id=2">Go to page 2</a>
            </div>

            <div id="page2" data-role"content">
                This is page 2
            </div>

            <script>
                $(document).ready(function() {
                    jQuery(document).on('pagehide', 'div', function(event, ui) {
                        var page = jQuery(event.target);
                        page.remove();
                    });

                    backButtonVar = $('#backButton');
                    page1Var = $('#page1');
                    page2Var = $('#page2');
                    // Is this the root?
                    if (window.location.search == '') {
                        backButtonVar.hide();
                        page1Var.show()
                        page2Var.hide()
                    } else {
                        backButtonVar.show();
                        page1Var.hide()
                        page2Var.show()
                    }
                });
            </script>
        </div>
    </body>
</html>

Answer 1

这是修复。给后退按钮backButton。 .hide()如果活动页面是主页page1，则为.show()。

<强> Demo

$('.backButton').hide();
$(document).on('pagebeforeshow', function () {
 var activePage = $.mobile.activePage;
 if (activePage[0].id != 'page1') {
  $('.backButton').show();
 }
 else {
  $('.backButton').hide();
 }
});

如果您有任何疑问，请告诉我。

带有强制刷新的标题后退按钮

1 个答案: