0

在 jquery mobile 的 index.html 页面中调用一个外部 html 页面时，页眉和页脚出现问题。这是我正在关注的示例代码：

索引.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");

示例.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”和“#faq”时，页眉和页脚通过固定位置正确显示，但是当调用 sample.html（外部 HTML 页面）时，页眉和页脚位置不显示固定位置。他们正在移动。

4

1 回答 1

0

问题在于您调用 attr() 方法的时间。您需要在创建之前绑定到页面。这样，在 JQM 增强标记之前设置页眉和页脚属性。IE

$(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()

于 2012-05-14T06:55:59.283 回答