0

jquery mobileのindex.htmlページで1つの外部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」と「#faq」を呼び出すと、ヘッダーとフッターは固定された位置で正しく表示されますが、sample.html（外部HTMLページ）を呼び出すと、ヘッダーとフッターの位置が表示されません。固定位置。彼らは動いています。

4

1 に答える 1

0

問題は、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 より前の場合は、on() の代わりに bind または delegate を使用してください。

于 2012-05-14T06:55:59.283 に答える