header & footer positions not fixed when calling external HTML page in index.html page?

问题

I have a problem with header & footer while calling one external html page in my index.html page in jquery mobile. Here is the sample code which I am following:

index.html

 <section id="main" data-role="page">
      <header data-role="header"> 
      </header>
      <div data-role="content" class="mainScreen">
        <a href="#single"  data-theme="e" data-role="button" >Single</a>
        <a href="sample.html"  data-theme="e" data-role="button">Sample</a>
        <a href="#faq" data-transition="slide" data-theme="e"data-role="button">FAQ</a>
    </div>
  </section>
   <section id="single" data-role="page"> 
      <header data-role="header">
           <div>..</div>  
      <footer data-role="footer"> 
   </section>
   <section id="faq" data-role="page"> 
   <header data-role="header"> 
               <div>..</div> 
   <footer data-role="footer">  
  </section>

main.js

    $("header").attr("data-position","fixed").attr("data-tap-toggle","false");
    $("footer").attr("data-position","fixed").attr("data-tap-toggle","false");

sample.html

<html>
  <head>......</head>
  <body>
     <section id="sample" data-role="page"> 
      <header data-role="header">
           <div>..</div>  
      <footer data-role="footer"> 
   </section>
 </body>
</html>

In the above index.html page when calling "#single" & "#faq", the header and footer are displaying correctly by their positions fixed but when sample.html (external HTML page) was called header and footer position are not displaying in fixed positions. they are moving.

回答1:

The issue lies in the timing that you are calling your attr() method. You need to bind to pagebeforecreate. This way your header and footer attributes are set before JQM enhances your markup. i.e.

$(document).on('pagebeforecreate', function(){
    $("header").attr("data-position","fixed").attr("data-tap-toggle","false");
    $("footer").attr("data-position","fixed").attr("data-tap-toggle","false");
});

Note: If your jQuery version is pre 1.7 use bind or delegate instead of on()

来源：https://stackoverflow.com/questions/10578545/header-footer-positions-not-fixed-when-calling-external-html-page-in-index-htm

标签

jquery

android

jquery-mobile