5

我需要使用这种技术强制刷新。当我导航到新页面时，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>
4

1 回答 1

5

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

演示

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

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

于 2013-05-07T07:56:14.060 回答