Bu makale aynı zamanda benim blogun bir parçası olarak HERE bulunabilir
giriş. jQuery Mobile sayfasını nasıl işler
Eğer jQuery Mobile nasıl çalıştığını anlamak gerekir bu durumu anlamak için
değiştirir. Diğer sayfaları yüklemek için ajax kullanır.
İlk sayfa normal olarak yüklenir. Onun HEAD ve BODYDOM yüklenir ve bunlar diğer içerikleri orada beklemek üzere bulunmaktadır.İkinci sayfa yüklendiğinde, sadece BODY içerik DOM yüklenir. Daha kesin olmak gerekirse, BODY tamamen dolu değildir. Bir özellik data-role = "page" olan sadece ilk div yüklenecek, her şey atılacak. BODY içinde daha fazla sayfanız olsa bile, yalnızca bir tanesi yüklenecektir. Bu kural yalnızca sonraki sayfalar için geçerlidir, eğer bir ilk HTML içinde daha fazla sayfa varsa hepsi yüklenecektir. Düğmeniz başarıyla göstermek ancak olay çalışmıyor tıklamak yüzden
. Sayfa geçişi sırasında üst öğesi HEAD göz ardı edilen aynı tıklama olayı. http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
Ne yazık ki bu onların belgelerinde açıklandığı bulmak için gidiş değildir:
İşte resmi belgeler var. Ether onlar bunun ortak bir bilgi olduğunu düşünüyorlar ya da bunu diğer konular gibi anlatmayı unuttular. (jQuery Mobile belgeleri büyük ama birçok şey eksik).
ikinci sayfasında Çözüm 1
, ve diğer her sayfa, bu gibi BODY içerik halinde SCRIPT etiketi taşımak:
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
Bu hızlı bir çözümdür ama hala çirkin bir.
Çalışma örneği burada benim diğer yanıt bulunabilir: Pageshow not triggered after changepage
Başka çalışma örneği: Page loaded differently with jQuery-mobile transition
Çözüm orijinal ilk HTML içine javascript tüm 2
Taşı. Her şeyi toplayın ve tek bir js dosyası içine, bir HEAD'a yerleştirin. JQuery Mobile yüklendikten sonra başlat.
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script> // Put your code into a new file
</head>
Sonuçta bunun neden iyi bir çözümün parçası olduğunu açıklayacağım.
Çözüm 3
Kullanım rel = "harici" düğmelerinizde ve sayfayı değiştirmek için kullandığınız her elemanlarda. Bu yüzden ajax sayfa yüklemesi için kullanılmayacak ve jQuery Mobile uygulamanız normal bir web uygulaması gibi davranacaktır. Ne yazık ki bu sizin durumunuzda iyi bir çözüm değildir. Phonegap asla normal bir web uygulaması olarak çalışmamalı.
<a href="#second" class="ui-btn-right" rel="external">Next</a>
Resmi belgeler, bir bölüm için bak: Linking without Ajax
Gerçekçi çözüm
Gerçekçi çözüm Çözüm 2 kullanmak. Ancak, çözüm 2'den farklı olarak, aynı index.js dosyasını kullanır ve olası her sayfanın bir HEAD içinde başlatırdım.
Şimdi bana NEDEN? jQuery Mobile gibi
Phonegap arabası olduğunu ve senin her tek bir HTML dosyası içinde içerik js if (yüklü DOM dahil) er ya da geç bir hata olacaksa oluyor ve uygulama başarısız olur. DOM silinmiş ve Phonegap geçerli sayfanızı yenileyebilir. Bu sayfa, yeniden başlatılıncaya kadar çalışmayan javascript içermiyorsa.
Son sözler
Bu sorun kolaylıkla iyi sayfa mimarisi ile düzeltilebilir. Birisi ilgilenirse, iyi jQuery Mobile sayfa mimarisi hakkında bir ARTICLE yazdım. Bir fındık kabuğunda, jQuery Mobile'ın nasıl çalıştığına dair bilginin, ilk uygulamayı başarıyla oluşturabilmeniz için bilmeniz gereken en önemli şey olduğunu tartışıyorum.
oldukça mükemmel bir cevap! Sonuç olarak, her js dosyasını her sayfaya ayıramayız. Bu bizim uygulamayı korumak için gerçekten zor yapar. Bir javascript hata tüm uygulamayı JqueryMobile ile aşağı yapacağını anlamına mı geliyor korkuyorum. –
Çözüm 1'de, harici bir komut dosyası eklemek çok çirkin mi? – ogborstad
Bu kesinlikle kötü bir fikir değil, herşeyi harici bir dosyada bulundurmayı tercih ediyorum. – Gajotres