Question

jquerymobile面板交叉页面
我想为每一页制作相同的面板菜单因为面板菜单是每个页面的相同内容我该怎么办？或任何建议？
我的示例代码如下

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
	<title></title>
</head>
<body>
	<div data-role="page" id="status">
		<div data-role="header" data-theme="b">
			<h1>Access Point Status</h1>
			<a class="ui-btn" data-rel="back" style="background:none;">back</a>
			<a class="ui-btn ui-btn-right" style="background:none;" href="#left-menu">menu</a>
		</div>
		<div id="left-menu" data-role="panel" data-position="left">
			<a class="ui-btn" href="#status">STATUS</a>
			<a class="ui-btn" href="#A">A</a>
		</div>
		<div data-role="content" class="ui-content" data-theme="e">
 		</div>		
		</div>
	</div>
	<div data-role="page" id="A">
		<div data-role="header" data-theme="b">
			<h1>PAGE A</h1>
			<a class="ui-btn " data-rel="back" style="background:none;">back</a>
			<a class="ui-btn ui-btn-right" style="background:none;" href="#left-a">menu</a>
		</div>
		<div id="left-a" data-role="panel" data-position="left">
			<a class="ui-btn" href="#status">STATUS</a>
			<a class="ui-btn" href="#A">A</a>
		</div>
		<div data-role="content" class="ui-content" data-theme="e">
   		</div>
	</div>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</html>

＆＃13;

Answer 1

在body标签和外页div中创建一个面板，如下所示

paste

然后在第一页的pagecreate事件中添加此

<body>
<div data-role="panel" id="myPanel" data-display="overlay" data-position="right" data-theme="b">
<ul data-role="listview">
    <li data-icon="false">
        <a href="#" data-transition="pop" data-rel="close">
            Home
        </a>
    </li>
    <li data-icon="false">
        <a href="#login"data-rel="close">Logout</a>
    </li>
</ul>
</div>
<div data-role="page" id="login">
..... page ....
</div>
....  other pages ....
</body>

jquerymobile面板跨页？

1 个答案: