jQuery Mobile – Header Bar / Footer Bar 使用方法
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <script type="text/javascript" language="javascript"> $.noConflict(); window.onload = OrientationUpdate; window.onorientationchange = OrientationUpdate; jQuery(document).bind("ready", function () { jQuery.ajaxSetup({ cache: false }); jQuery(".reload").bind("click", function () { window.location='test.aspx'; }); }); function OrientationUpdate() { if(window.orientation == 180 || window.orientation == 0){ jQuery("#footer").css("display", ""); jQuery("#header").css("display", ""); } else if (window.orientation == 90 || window.orientation == -90) { jQuery("#footer").css("display", "none"); jQuery("#header").css("display", "none"); } } </script> <div data-role="page" id="page" style="margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; background-color:#000000; overflow:hidden;"> <div id="header" data-role="header" data-position="inline"> <a class="reload" href="#" data-icon="gear">Reload</a> <span id="headertitle" class="ui-title">YouTube</span> </div> <div data-role="content" style="margin:0px 0px 0px 0px; padding:10px 2% 200px 2%; width:97%; background-color:#000000;"> … … </div> <div id="footer" data-role="footer" data-position="fixed"> <h4>YouTube</h4> </div> </div> |