1

我在使用 jq-mobile 禁用显示面板时遇到问题。

我使用模板 PHP，每个页面共享相同的页眉和页脚，所以我为这个问题创建了 html 版本。

标题有两个按钮，可以打开左面板或右面板。page1.html 有 2 个面板（左和右），page2.html 有 1 个面板（左）。

因此，在 page2.html 中，必须禁用标题中的右侧按钮面板，因为 page2.html 没有右侧面板。

问题是，当我打开 page1 然后通过左侧面板菜单导航到 page2 时，右侧面板标题按钮未被禁用。我专门在 page2.html 中添加了ui-disable类脚本，但不起作用。

如果我直接访问 page2.html，则该按钮被禁用。

这里是源代码：

page1.html

<!DOCTYPE html>
<html>
<head>
    <title>HOME</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

    <script>
        $( document ).on( "pageinit", "#index-page", function() {
            $( document ).on( "swipeleft swiperight", "#index-page", function( e ) {
                if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
                    if ( e.type === "swipeleft"  ) {
                        $( "#index-page .right-panel" ).panel( "open" );
                    } else if ( e.type === "swiperight" ) {
                        $( "#index-page .left-panel" ).panel( "open" );
                    }
                }
            });
        });
    </script>
</head>
<body>

    <div data-role="page" id="index-page" class="index-page">

        <!--header-->
        <div data-role="header" data-position="fixed">
            <h1>HOME</h1>
            <a id="show-left-panel" href="#left-panel" data-theme="b" data-icon="arrow-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>
            <a id="show-right-panel" href="#right-panel" data-theme="b" data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open right panel</a>
        </div><!--/header-->

        <!-- content -->
        <div data-role="content">
            <ul data-role="listview">
                <li data-role="list-divider"><h2>Latest News</h2></li>
                    <li><a href="#">
                        <h3>News 1</h3>
                        <p>News news  news  news  news  news  news  news  news  news  news  news  news ...</p>
                        <p class="ui-li-aside">Fri, Feb 14th 2013</p>
                    </a></li>
                    <li><a href="#">
                        <h3>Dummy word example</h3>
                        <p>The quick brown fox jumps over the lazy doug blah blah The quick brown fox jumps over the lazy doug blah blah...</p>
                        <p class="ui-li-aside">Mon, Jan 14th 2013</p>
                    </a></li>
            </ul>
        </div><!-- /content -->

        <!-- left-panel -->
        <div data-role="panel" id="left-panel" class="left-panel" data-display="push">
            <ul data-role="listview" data-count-theme="e">
                <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
                <li data-icon="info" data-iconpos="notext"><a href="page2.html">Page 2</a></li>
            </ul>
        </div><!-- /left-panel -->

        <!-- right-panel -->
        <div data-role="panel" id="right-panel" class="right-panel" data-display="overlay" data-position="right">
            <ul data-role="listview" data-icon="false">
                <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
                <li data-role="list-divider">Submenu</li>
                <li data-theme="e">Foo</li>
                <li><a href="#">Bar</a></li>
            </ul>
        </div><!-- /right-panel -->

        <!--footer-->
        <div data-role="footer" data-position="fixed">
            <h3>Copyright &copy; 2013 Example.com</h3>
        </div><!--/footer-->

    </div>

</body>
</html>

page2.html

<!DOCTYPE html>
<html>
<head>
    <title>HOME</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

    <script>
        $( document ).on( "pageinit", "#index-page", function() {
            $( document ).on( "swipeleft swiperight", "#index-page", function( e ) {
                if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
                    if ( e.type === "swipeleft"  ) {
                        $( "#index-page .right-panel" ).panel( "open" );
                    } else if ( e.type === "swiperight" ) {
                        $( "#index-page .left-panel" ).panel( "open" );
                    }
                }
            });

            $('#show-right-panel').addClass('ui-disabled'); //if I load page1.html first, than goes here, this line seems to have no effect?
        });
    </script>
</head>
<body>

    <div data-role="page" id="index-page" class="index-page">

        <!--header-->
        <div data-role="header" data-position="fixed">
            <h1>HOME</h1>
            <a id="show-left-panel" href="#left-panel" data-theme="b" data-icon="arrow-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>
            <a id="show-right-panel" href="#right-panel" data-theme="b" data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open right panel</a>
        </div><!--/header-->

        <!-- content -->
        <div data-role="content">
            <ul data-role="listview">
                <li data-role="list-divider"><h2>Subpage</h2></li>
                    <li><a href="#">
                        <h3>SUb 1</h3>
                        <p>News news  news  news  news  news  news  news  news  news  news  news  news ...</p>
                        <p class="ui-li-aside">Fri, Feb 14th 2013</p>
                    </a></li>
            </ul>
        </div><!-- /content -->

        <!-- left-panel -->
        <div data-role="panel" id="left-panel" class="left-panel" data-display="push">
            <ul data-role="listview" data-count-theme="e">
                <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
                <li data-icon="info" data-iconpos="notext"><a href="page1.html">Page 1</a></li>
            </ul>
        </div><!-- /left-panel -->

        <!--footer-->
        <div data-role="footer" data-position="fixed">
            <h3>Copyright &copy; 2013 Example.com</h3>
        </div><!--/footer-->

    </div>

</body>
</html>
4

3 回答 3

0

您的代码有问题（不是错误，因为您的代码完美无缺）。

如果 jQuery 移动页面被分隔在多个 HTML 文件中，当第二个 HTMl 文件加载到 DOM 中时，只会加载其 BODY 内容，其他所有内容（包括 HEAD）都将被丢弃。

因此，您的代码可以通过两种方式修复：

  1. 将脚本内容从page2.html移动到page1.html
  2. 将您的脚本内容从page.2html HEAD 移动到page2.html BODY

解决方案一更简洁，但每个人都是正确的，因此请选择更适合您的解决方案。

另一个问题，你不能有 2 个具有相同 id 的页面，所以在page2.html文件中更改页面 id。

有关此主题的更多信息可以在我的其他文章（我的个人博客）中找到，以及带有示例的预防方法。

于 2013-03-11T09:43:20.337 回答
0

显然前一页的 DOM 仍在活动页面中。所以我添加了以下脚本来删除它：

$( document ).on( "pageshow", "div.big-page", function(event, ui) {
    $(ui.prevPage).remove();
    if($("#right-panel").length > 0) { // make sure the page has right panel
        $("#show-right-panel").removeClass("ui-disabled");
    }
});

酸：JQM（jQueryMobile）在changePage（）上将最后一页推出DOM

于 2013-03-11T16:55:11.603 回答
-1

尝试使用不同版本的 JQM 库和 css

于 2013-09-15T06:28:31.530 回答