jQuery Mobile – Header Bar / Footer Bar 使用方法

 
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>