jQueryMobile'de aynı üstbilgi/altbilgi sayfalarda nasıl tutulur?

Question

jQueryMobile sayfalarında gezinirken aynı üstbilgi/altbilgiyi saklamak için kolay bir yöntem var mı? Şimdiye kadar karşılaştığım tek çözüm, sayfa değişikliğinde dinamik olarak enjekte etmeye dayanıyor, ancak bu geçişleri sıkıştırıyor ve sadece elemanları klonlıyor, orijinaline ihtiyacım var.

Resmi olarak desteklenen bir yol var mı? Bu problemle uğraşan tek kişi gibi görünmek garip geliyor mu?

Answer 1

Sorununuz için yerleşik bir çözüm mevcut değil. jQuery Mobile, yüklenen sayfalar arasında bir üstbilgi ve altbilgi paylaşacak bir çözüme sahip değil.

Yapabileceğiniz tek şey, bunları dinamik olarak enjekte etmek ya da en başından itibaren kullanmaktır. Senin durumunda, yanlış zamanda yapıyorsun. Bir başlık ve altbilgiyi doğru şekilde eklemek istiyorsanız, doğru sayfa etkinliği sırasında bunu yapmanız gerekir.

Bir çalışma örneği: http://jsfiddle.net/Gajotres/xwrqn/

kaydırın sayfalarını değiştirmek ve (Her sayfada düğmeleri ekleyerek rahatsız etmek istemedim) nasıl çalıştığını görmek.

$(document).on('pagebeforecreate', '#article2, #article3', function(){ 
    $('<div>').attr({'data-role':'header','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article</h3>').appendTo($(this)); 
    $('<div>').attr({'data-role':'footer','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article footer</h3>').appendTo($(this));  
}); 

sayfa ilk kez oluşturulduğunda bu SADECE kez tetikleyecek pagebeforecreate sırasında yaparsanız. Dinamik içerik eklenecek ve içerik biçimlendirme artırılmadan önce pagebeforecreate tetiklendiğinden, üstbilgi ve altbilgi stilleri hakkında endişelenmenize gerek kalmayacaktır.

Bildirim bir nitelik 'veri-id': 'altbilgi' yalnızca içerik sayfası geçiş başlığında sırasında animasyon ve altbilgi aynı görünür yüzünden, her üstbilgi ve altbilgi eklendi. Ayrıca, jsFiddle bir hata var, sayfalar arasında gezinirken 1-2px atlayacaklar. Bu gerçek bir yaşam örneğinde olmayacak.

Answer 2

kolay yolu tüm sayfalarda üstbilgi ve altbilgi bir "veri-id" ayrıntısını eklemektir. Üstbilgi/altbilgiyi "kalıcı" hale getirmek için, tüm sayfalarda aynı veri kimliğini kullanın.

<div id="page1"> 
<div data-role="header" data-id="main-header"></div> 
... 
<div data-role="footer" data-id="main-footer"></div> 
</div> 

<div id="page2"> 
<div data-role="header" data-id="main-header"></div> 
... 
<div data-role="footer" data-id="main-footer"></div> 
</div> 

Ayrıca ya "sabit" css veya veri-pozisyonunda = olarak üstbilgi ve altbilgi düzeltmek isterdim.

Bu yardımcı olur umarım. jQueryMobile sayfalarını gezinirken

 $(":mobile-pagecontainer").on("pagecontainerbeforetransition", function (event, ui) { 
      $("#header").prependTo(ui.toPage); 
      $("#control-panel").appendTo(ui.toPage); 
     }); 

aynı başlık/alt bilgi tutar:

Answer 3

Burada benzer bir sorunu çözüldü nasıl. Sayfa değiştirmede dinamik olarak enjekte eder, geçişleri sıkıştırır, ancak öğeleri klonlamaz, orijinali verir.