Jquery mobile jQuery移动更改页面不'；t禁用显示面板按钮_Jquery Mobile_Button_Panel

Jquery mobile jQuery移动更改页面不'；t禁用显示面板按钮

jquery-mobile button

Jquery mobile jQuery移动更改页面不'；t禁用显示面板按钮,jquery-mobile,button,panel,Jquery Mobile,Button,Panel,我无法使用jq mobile禁用显示面板我使用模板PHP，每个页面共享相同的页眉和页脚，因此我为这个问题创建了html版本收割台有两个按钮，可打开左侧或右侧面板。 page1.html有两个面板（左和右），page2.html有一个面板（左）因此，在page2.html中，必须禁用标题中的右按钮面板，因为page2.html没有右面板问题是，当我打开page1，然后通过左面板菜单导航到page2时，右面板标题按钮未被禁用。我特别在page2.html中添加了ui disable类脚本，但

我无法使用jq mobile禁用显示面板

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

收割台有两个按钮，可打开左侧或右侧面板。 page1.html有两个面板（左和右），page2.html有一个面板（左）

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

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

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

这里是源代码：

页面1.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>


家
$（文档）。在（“pageinit”，“索引页”，函数（）上）{
$（文档）.on（“swipeleft swiperight”、“#索引页”，函数（e）{
如果（$.mobile.activePage.jqmData（“面板”）！=“打开”）{
如果（e.type==“swipeleft”）{
$（“#索引页.右面板”）.panel（“打开”）；
}否则如果（例如类型==“swiperight”）{
$（“#索引页.左面板”）.面板（“打开”）；
}
}
});
});
家

最新消息









子菜单
Foo


版权及副本；2013 Example.com

页面2.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>


家
$（文档）。在（“pageinit”，“索引页”，函数（）上）{
$（文档）.on（“swipeleft swiperight”、“#索引页”，函数（e）{
如果（$.mobile.activePage.jqmData（“面板”）！=“打开”）{
如果（e.type==“swipeleft”）{
$（“#索引页.右面板”）.panel（“打开”）；
}否则如果（例如类型==“swiperight”）{
$（“#索引页.左面板”）.面板（“打开”）；
}
}
});
$（“#show right panel”）.addClass（'ui-disabled'）；//如果我先加载page1.html，然后再加载到这里，这一行似乎没有效果？
});
家

子页面






版权及副本；2013 Example.com

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

如果jQuery移动页面在多个HTML文件中分离，那么当第二个HTML文件加载到DOM中时，只加载其主体内容，其他所有内容（包括头部）都将被丢弃

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

将脚本内容从page2.html移动到page1.html

将脚本内容从page.2html头部移动到page2.html正文中

解决方案一更干净，但每个人都是正确的，所以选择一个更适合你的解决方案

还有一个问题，您不能有两个具有相同id的页面，因此请在page2.html文件中更改页面id

关于这个主题的更多信息可以在我的另一个（我的个人博客）中找到，以及带有示例的预防方法。

显然上一页的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库和css

复制显然我的问题是页面中仍然存在上一页的DOM。我在这里使用解决方案：无论如何，谢谢你的指导。