Question

我的标题和版本有问题在jquery mobile的index.html页面中调用一个外部html页面时的页脚。以下是我要遵循的示例代码：

的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>

在上面的index.html页面中调用“#single”＆amp; “#faq”，页眉和页脚正确显示其位置固定，但当sample.html（外部HTML页面）被称为页眉和页脚位置未显示在固定位置时。他们正在移动。

Answer 1

问题在于您调用attr（）方法的时间。您需要绑定到pagebeforecreate。这样，在JQM增强标记之前，会设置页眉和页脚属性。即。

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

注意：如果您的jQuery版本是1.7之前的版本，请使用bind或delegate而不是on（）

标题＆amp;在index.html页面中调用外部HTML页面时，页脚位置不固定？

1 个答案: