jquerymobile header導航和footer底部固定
阿新 • • 發佈:2019-02-11
增加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>