我是JQuery Mobile的新手，任何人都可以帮助我。我在容器页面中有3个具有不同ID（panel-main，room1，room2）的页面。如果您单击第一页上的菜单按钮，则它将打开ID为“ nav-panel”的导航面板。“导航面板”包含指向其他两个页面（room1，room2）的链接。现在我的问题是我无法从room1和room2页面调用“ nav-panel”。
下面是代码
<div data-role="page" class="jqm-demos ui-responsive-panel" id="panel-main" data-title="Panel main">
<div data-role="header">
<h1>main panel</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<p>main panel</p>
</div>
<div data-role="panel" data-display="push" data-theme="b" id="nav-panel">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#room1">Room 1 page</a></li>
<li><a href="#room2">Room 2 Page</a></li>
</ul>
</div>
</div>
<div data-role="page" id="room1" data-theme="a">
<div data-role="header">
<h1>Room 1</h1>
<!--I want to call the "nav-panel" in this page (room1)-->
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
</div>
<div data-role="main" class="ui-content">
<p>This is room 1 page</p>
</div>
</div>
<div data-role="page" id="room2" data-dialog="true" data-theme="a">
<div data-role="header">
<h1>Room 1</h1>
<!--I want to call the "nav-panel" in this page (room2)-->
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
</div>
<div data-role="main" class="ui-content">
<p>This is room 2 page</p>
</div>
</div>
工作示例：http : //jsfiddle.net/Gajotres/vds2U/47/
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="panel" data-display="push" data-theme="b" id="nav-panel" data-position="left">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-main">Main panel page</a></li>
<li><a href="#room1">Room 1 page</a></li>
<li><a href="#room2">Room 2 Page</a></li>
</ul>
</div>
<div data-role="page" id="panel-main" data-title="Panel main" data-position="fixed">
<div data-role="header">
<h1>main panel</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<p>main panel</p>
</div>
</div>
<div data-role="page" id="room1" data-theme="a" data-position="fixed">
<div data-role="header">
<h1>Room 1</h1>
<!--I want to call the "nav-panel" in this page (room1)-->
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
</div>
<div data-role="main" class="ui-content">
<p>This is room 1 page</p>
</div>
</div>
<div data-role="page" id="room2" data-dialog="true" data-theme="a" data-position="fixed">
<div data-role="header">
<h1>Room 1</h1>
<!--I want to call the "nav-panel" in this page (room2)-->
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
</div>
<div data-role="main" class="ui-content">
<p>This is room 2 page</p>
</div>
</div>
</body>
</html>
$(function () {
$("[data-role=panel]").enhanceWithin().panel();
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句