2011-07-06 15 views
6

sayfa geçişi sırasında hareketBazen inatçı altbilgi de ben bu html kodudur jquerymobile

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
     <script> 
     $('#home, #page2, #page3').live('pagebeforeshow',function(event){ 
      $('#' + $(this).attr('id') + '_link').addClass('ui-btn-active'); 
     }); 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="home"> 
      <div data-role="header" data-theme="b"> 
       <h1>Test</h1> 
      </div> 
      <div data-role="content" data-theme="b"> 
       Home Page 
      </div> 
      <div data-role="footer" data-position="fixed" data-id="pFooter"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home" data-icon="custom" class="ui-btn-active" id="home_link">Home</a></li> 
         <li><a href="#page2" data-icon="grid">Second page</a></li> 
         <li><a href="#page3" data-icon="star">Third page</a></li> 
        </ul> 
       </div> 
      </div>  
     </div> 
     <div data-role="page" id="page2"> 
      <div data-role="header" data-theme="b"> 
       <h1>Test</h1> 
      </div> 
      <div data-role="content" data-theme="b"> 
       Second page 
      </div> 
      <div data-role="footer" data-position="fixed" data-id="pFooter"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home" data-icon="custom">Home</a></li> 
         <li><a href="#page2" data-icon="grid" class="ui-btn-active" id="page2_link">Second page</a></li> 
         <li><a href="#page3" data-icon="star">Third page</a></li> 
        </ul> 
       </div> 
      </div>  
     </div> 
     <div data-role="page" id="page3"> 
      <div data-role="header" data-theme="b"> 
       <h1>Test</h1> 
      </div> 
      <div data-role="content" data-theme="b"> 
       Third page 
      </div> 
      <div data-role="footer" data-position="fixed" data-id="pFooter"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home" data-icon="custom">Home</a></li> 
         <li><a href="#page2" data-icon="grid">Second page</a></li> 
         <li><a href="#page3" data-icon="star" class="ui-btn-active" id="page3_link">Third page</a></li> 
        </ul> 
       </div> 
      </div>  
     </div> 
    </body> 
</html> 

Karşılıklı sorun olduğunu ben gezinme çubuğu seçimini değiştirmek bazen zaman, altbilgi da sola kaydığı veya page.You ile birlikte sağ navbar düğme seçimini sürekli değiştirerek yeniden üretebilirsiniz.

Uygulamayı buradan görebilirsiniz - http://jsfiddle.net/tKMgd/5/

+0

Sanırım dikey kaydırma çubuğu suçlu. her zaman orada mı? Mobil cihazda olmayacak, bu yüzden cihaz üzerinde denediniz mi? Ayrıca, diğer sayfa geçişlerini denediniz mi? – Tsar

+0

Rastgele gerçekleşir.Bazen tamamen gerçekleşmez.Ben cihazda denemedim ve diğer geçişleri denemedim. – user700284

+0

Ayrıca bu sorunu yaşıyorum. Herhangi bir çözüm bulabildin mi? – John

cevap

1

Ben boyunca bu problem.But çözmek için belirli bir şey yapmadım Sorun şu anda değil.İlk kullanıyorum JQM sürümlerini güncelledim ve şimdi JQM 1.1

1

Birisi bu sorunu tartışıldı ve belki de sizin için işe yarayabilecek, geçici bir çözüm vardı? cevap

https://github.com/jquery/jquery-mobile/issues/2226

alıntı

zaman önceki sayfanın Altbilgiyi tanımlamaz kaynak kodunu ( aynı veri-kimlikli) kalıcı altbilgi kullanarak sayfaları arasında hızlı geçiş. Sorun, setTimeout (satır 5812 - jquery.mobile-1.0b2) nedeniyle gerçekleşir. Sayfalar arasında hızlı geçiş yaparsanız, altbilgisi 500 ms gecikme nedeniyle orada olmayacaktır. Bu setTimeout'u çıkarırsanız veya sıfır olarak ayarlarsanız, bu sorun bir daha olmaz, ancak Bunun sonuçlarından emin değilim.

(Ben diğer cihazlar/tarayıcılar denemedim) Safari ve iOS'ta bu sorunu yeniden başardı

2

kullanarak Sorun, üstbilgi/altbilgi ile kullanmaktansa, data-position = "sabit" html kullanmak yerine sadece pozisyonu ayarlayın: css'inize sabitlenir ve elemanın yüksek bir z indeksine - viyola, daha fazla "yanıp sönme" vermemesi

+0

Up 1 kullanarak JQM sürümlerini güncellemişti 1. Bu benim için çalıştı . (jQuery Mobile 1.4.2) Sayfayı başka bir yere sürüklerken aynı sorunu yaşadım. Firebug kullanarak altbilginin incelenmesi üzerine jQuery, "ui-fixed-hidden" adlı bir ders eklediğini ve kaldırdığını fark ettim. Bu, garip titreşime neden oluyor ve gerçekten de önerilen cevabı uygulayarak çözülüyor. – Ideogram

İlgili konular