我在使用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 © 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 © 2013 Example.com</h3>
</div><!--/footer-->
</div>
</body>
</html>
答案 0 :(得分：0)
您的代码存在问题（不是错误，因为您的代码完美无瑕）。
如果jQuery移动页面在多个HTML文件中分开，当第二个HTMl文件加载到DOM时，只会加载其BODY内容，其他所有内容（包括HEAD）都将被丢弃。
因此，您的代码可以通过两种方式修复：
解决方案一个更清洁，但每个人都是正确的，所以选择一个更适合你的解决方案。
另一个问题是，您不能拥有2个具有相同ID的网页，因此请在 page2.html 文件中更改网页ID。
有关此主题的更多信息，请参阅我的其他 ARTICLE （我的个人博客），以及带有示例的预防方法。
答案 1 :(得分：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");
}
});
soure：JQM (jQueryMobile) Push last page out of DOM on changePage()
答案 2 :(得分：-1)
尝试使用不同版本的JQM库和css