您的位置：首页 > Web前端 > JQuery

jquerymobile header导航和footer底部固定

2013-07-30 14:32 405 查看
增加data-position="fixed" data-tap-toggle="false"即可。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>data-role="page"</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.min.css"/>
<script src="jqm/jquery-1.8.2.min.js"></script>
<script src="jqm/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
<div data-role="page">

<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>Home</h1>
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">Home</a></li>
<li><a href="b.html" >Credits</a></li>
<li><a href="c.html" >Contact</a></li>
</ul>
</div>
</div>

<div data-role="content">
<p>
This is the Home Page
</p>
</div>

<div data-role="footer" data-position="fixed" data-id="footernav" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">Home</a></li>
<li><a href="b.html" >Credits</a></li>
<li><a href="c.html" >Contact</a></li>
</ul>
</div>
</div>

</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航