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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Oma*_*mar 5

这是修复.给后退一个班级backButton..hide()如果活动页面是主页page1,否则.show()它.

演示

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

Run Code Online (Sandbox Code Playgroud)

如果您有任何疑问,请告诉我.

归档时间：	12 年，10 月前
查看次数：	1790 次
最近记录：	12 年，9 月前