JQuery Mobile Mobil Uygulama Tasarımı / Dev Başlangıç ​​Kılavuzu

Geçtiğimiz 2-3 yıl boyunca, mobil web siteleri için tarayıcı ve işletim sistemi desteğinde muazzam bir büyüme gördük. En önemlisi, Apple'ın iOS ve Google'ın Android platformları akla geliyor. Ancak PalmOS ve Blackberry gibi diğerleri hala karışımda. Yakın zamana kadar, tek bir mobil temayı tüm bu platformlarla eşleştirmek çok zordu..

JavaScript bir başlangıçtı, ancak şimdiye kadar gerçekten birleştirilmiş bir kitaplık olmamıştı. jQuery Mobile, jQuery'nin en iyi özelliklerini alır ve bunları mobil tabanlı bir web kaynağına yönlendirir. Kitaplık, temel HTML öğeleri için animasyonlar, geçiş efektleri ve otomatik CSS stillerini içeren bir çerçeve gibidir. Bu rehberde, platformu kendi jQuery mobil uygulamalarınızı tasarlarken rahat hissedebileceğiniz şekilde tanıtmayı umuyorum.

Özellikler ve İşletim Sistemi Desteği

JQuery Mobile'ı diğer çerçevelerden öğrenmemin önerisi basitlik. Kod jQuery çekirdeği üzerine inşa edilmiştir ve aktif bir geliştirici ekibine senaryolar yazıp hatalar yazmaktadır. HTML5 desteği, Ajax destekli gezinti bağlantıları ve dokunma / kaydırma etkinliği işleyicilerini içeren birçok özellik.

Destek telefonlar arasında değişiklik gösterir ve A-C'den 3 kategoriden oluşan bir çizelgeye bölünür. A, jQuery Mobile'ın tam desteğine sahip en üst seviyedir, B, Ajax dışında her şeye sahiptir; C ise, çok az JavaScript içeren temel HTML'dir. Neyse ki, popüler işletim sistemlerinin çoğu tam olarak desteklenmektedir - Sadece birkaç örneğin altında bir liste ekledim.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Böğürtlen 6.0, Böğürtlen 7
• Palm WebOS 1.4-2.0, 3.0

Daha fazla bilgi edinmek istiyorsanız, resmi dokümanlar sayfasında okumaya çalışın. Bu anlamsızca yazılmış değil ve aslında takip etmesi çok kolay. Şimdi bir jQuery mobil sayfası yazmanın temellerine ve küçük bir uygulamayı nasıl oluşturabileceğimize odaklanalım!

Standart HTML Şablonu

İlk mobil uygulamanızın çalışmasını sağlamak için başlamanız gereken bir şablon var. Bu, tümü jQuery CDN'sinde barındırılan mobil JS ve CSS ile birlikte jQuery temel kodunu içerir. Aşağıdaki örnek kodumu kontrol et.

Buradaki tek yabancı unsur iki meta etiketi olmalıdır. Üst viewport etiketi, tam zoom efekti kullanmak için mobil tarayıcıları günceller. Değerin ayarlanması genişlik = aygıt genişliği sayfa genişliğini tam olarak telefon ekranının genişliğine ayarlayacaktır. Ve hepsinden önemlisi, jQuery Mobile kaydırma düzenlerine uyum sağlayabildiğinden, zoom özelliklerini devre dışı bırakmaz..

Bir sonraki meta etiketi X-UA uyumlu Internet Explorer’ı HTML’i en son yinelemesinde göstermeye zorlar. Daha eski tarayıcılar ve özellikle mobil cihazlar, bilinmeyen görüntü oluşturma hatalarını aşmaya çalışır.

Vücut İçeriğini Oluşturmak

İşte burası jQuery mobile'ın zor olabileceği yerdir. Her HTML sayfasının mutlaka mobil sitede 1 sayfa olması gerekmez. Çerçeve, ekleyerek hevesle oluşturabileceğiniz HTML5'in veri özelliklerini kullanır. veri- önceden. Benzer bir şekilde veri rolü = "sayfa" Tek bir HTML dosyasında birden fazla divs olarak ayarlanabilir, size birden fazla sayfa verir.

Daha sonra bağlantı sayfaları ve benzersiz bir kimlik ile bu sayfalar arasında hareket ederdiniz. Bu kurulum basit ve basit uygulamalar için iyi bir fikirdir. Eğer sadece 3-5 sayfaya ihtiyacınız varsa, neden hepsini tek bir dosyada saklamıyorsunuz? Çok fazla yazılı içeriğiniz yoksa, bu durumda PHP kullanmayı deneyin..

Kaybolduysanız aşağıdaki kod örneğini kontrol edin.

 
 
 
Üst başlık çubuğu
 
 
 
Başka sayfa göster??
 
ipucu: aşağıdaki butona tıklayın!
 
Hakkımızda
 
  
 
 
 
Sayfa 2 İşte
 
 
 
sadece biraz ekstra içerik.
 
Yani yapabilirsin geri dön her zaman.
 
 
   

Dizin sayfasındaki bağlantı linkini bir anlığına inceleyin. Uyarı ben özelliği ekledim veri rol = "button" Bağlantıyı bir düğme olarak ayarlamak için Ancak, eklediğimiz varsayılan stilleri kullanmak yerine veri teması = "C". Bu, jQ Mobile içindeki varsayılan olarak CSS stilleri olarak paketlenmiş 5 (1 a-e tema) şablon arasında geçiş yapar.

Düğmem ayrıca sayfa genişliğini de kapsıyor. Davranışı kaldırmak için, öğeyi bloktan satır içi gösterime ayarlamamız gerekir. Bunu yapma özelliği veri-inline = "true" herhangi bir bağlantı düğmesine ekleyebileceğiniz.

Üstbilgi ve Altbilgi Çubukları

Uygulamalarınızın en üst ve en alt kısımları boyunca üst bilgi ve alt bilgi içeriği eklemelisiniz. Bu tasarım stili genellikle ilk önce Apple'ın mobil Uygulama Mağazası kullanılarak popüler olan iOS uygulamalarıyla ilişkilendirilir. jQ Mobile, üstbilgi, altbilgi ve sayfa içeriğini tanımlamak için veri rolü özelliklerini kullanır. Bu alanlara kısa bir göz atalım.

Üst Çubuk Düğmeleri

Varsayılan olarak, üstteki çubuk diğer mobil uygulamalara benzer şekilde iki (2) bağlantıyı destekler. iOS varsayılan olarak “geri” sola ve sık sık bir düğme “seçenekleri” veya “yapılandırma” sağda.

 
 Ayarlar 
Sayfa 2 İşte
 
 

Yukarıdaki kod, başlık içeriğinin yanı sıra Hakkında sayfamız için div kabına da odaklanmaktadır. Ek HTML özelliği = "True" veri eklenti geri-btn sadece bir sayfa veri rolü üzerine eklendiğinde çalışacaktır. Amaç, tarayıcınızın geri düğmesine benzer şekilde çalışan bir geri düğmesi otomatik olarak eklemektir.

İçerik alanında kullandığımız kod ile manuel olarak bir geri düğmesi ekleyebilirdik. Ancak bunun özellikle birden fazla sayfaya kurulumunun daha uzun sürdüğünü düşünüyorum. Başlık bölümündeki tüm bağlantı linkleri varsayılan olarak sol / sağ düğme pozisyonlarında olacaktır. Kullanarak class = "ui-btn-sağ" Bu, Ayarlar düğmemi yeniden konumlandırdı, böylece geri düğmesi için boş alan kalıyor. Ayrıca ikincil tema stillerini kullanmaya başladım.!

Altbilgi Gezintisi

Altbilgi alanı çoğu ilk başta çok yararlı hissetmez. Telif hakkı materyallerini ve daha önemli bağlantıları saklayabileceğiniz bir yer ama bu içerik alanınızın altına kolayca eklenebilir. Peki altbilgiyi kullanmak ne güzel?

Gördüğüm en iyi örnek, sayfa gezinmesini kontrol etmek için sekme bağlantılarının göründüğü bir gezinme sistemi olarak altbilgi alanını kullanıyor. Tam ekran efektleri seçebileceğiniz, simgeler ekleyebileceğiniz, yerleşimi ayarlayabileceğiniz ve birkaç başka özellik seçebileceğiniz birçok seçenek vardır. Ancak, bunun nasıl çalıştığı hakkında bir fikir edinmek için 3 düğmeli basit bir altbilgi dosyası oluşturalım..

• Canlı Demoyu Önizle

Yani burada sayfa bölümü için bazı altbilgi kodu. veri rol = "Menü" UL elemanının kendisi değil, sıralanmamış bir listeyi barındıran konteyner elemanına eklenmelidir. Listedeki her bağlantı bir sekme çubuğu olarak değerlendirilir ve bu da toplam bağlantı sayısına göre eşit olarak bölünür. Ek sınıf ui-gövde-b az sayıdaki stil arasında geçiş yaparken sadece estetik efektler ekliyor.

İlk düğmede fark ederseniz, ben öznitelik var Veri-yönü = "geri". Ana sayfaya geri dönmek için geri düğmesi ayarını daha önceki gibi kullanabildiğim halde, bunun yerine sayfa kimliğini kullandım. #INDEX. Varsayılan olarak, uygulama penceresi, animasyonun geriye doğru hareket etmesini beklediğiniz için oldukça yapışkan görünen sağa geçiş yapacaktır. Vaktiniz varsa, bu animasyonlu efektlerden daha da fazlasını oynayabilirsiniz. JQuery belgelerinde geçişler bilgi sayfasına göz atın.

Ajax ve Dinamik Sayfalar

İlk segment, jQuery ile mobil uygulama geliştirmenin kilit noktalarını gerçekten açtı. Ancak harici bir sayfadan veri yükleyen yeni bir uygulama başlatmak istiyorum. Ben elde etmek için çok basit bir PHP betiği kullanıyorum $ _REQUEST [] değişken ve buna göre küçük bir Dribbble vurdu görüntüler. Aşağıdaki ekran şovu size ne yapacağımız konusunda bir fikir vermeli.

İlk önce varsayılan şablonda ayarlanmış bir index.html sayfası hazırlayacağım. Bu ana ekran için, her bir bağlantıyı sırayla görüntülemek için liste görünümü kurulumu kullanıyorum. Bu içerik alanında bir ile yapılır. veri rol = "liste görünümü" liste kabındaki özellik. Başlıktaki başlıkları eskisi gibi keserek, kodumun tamamını bu yeni dizin sayfasından ekledim.

 
 
 
Ekim 2011 Çekimleri
 
 
 
 
İlk görüntü
 
İkinci görüntü
 
Üçüncü görüntü
 
Dördüncü resim
 
 
  
   

Liste görünümümdeki bağlantıların her biri aynı dosyaya işaret eder - index.php. Ama biz parametreye geçiyoruz imgid istek değişkeni olarak. İmage.php dosyasında kimliği alırız ve önceden ayarlanmış 4 değere karşı test ederiz. Herhangi bir eşleşme olursa eşleşen resim URL’sini ve başlığını kullanırız, aksi takdirde yalnızca bir varsayılan Dribbble.

Resim Yükleyici Komut Dosyası

İmage.php betiği hala koda eklenmiş varsayılan jQuery mobil şablonuna sahip. Arka bağlantı özniteliğimizin eklenmesi dışında, aslında çok benzer bir üstbilgi ve altbilgiyi paylaşıyor. = "True" veri eklenti geri-btn. Bu butona sadece ilk önce index.html den gelirsek göründüğüne dikkat edin! İmage.php dosyasını doğrudan yüklemeyi deneyin; “geri” taşımak.

Önce PHP mantığımı inceleyerek kodu biraz daha iyi anlayabileceğimizi düşünüyorum. Kullanıyoruz şalter / dava 4 farklı kimliğe karşı kontrol etme ve başlık başlığı, resim URL'si ve orijinal sanatçı kaynak bağlantısı sağlama yöntemi.

Her şey oldukça basit görünüyor - bir acemi PHP dev bile takip edebiliyor olmalı! Eğer anlamadıysanız, yine de jQuery kodu için önemli değildir, bu yüzden endişelenmeyin. Şimdi geçiş yapmalı ve bu yeni sayfada oluşturduğum şablona bir göz atmalıyız. Yukarıdaki tüm PHP bloğundan sonra tüm HTML kodu eklenir. Kimliğini kullandım “Görüntüler” konteyner için ve hatta her yeni fotoğrafla değiştirmek için başlığı ayarlamak.

 
 
 
 
 
 Orijinali Görüntüle
 
 
  
 

Muhtemelen bu gösterinin ne kadar basit olduğunu görebilirsiniz. Ancak bütün amaç jQuery mobile'ın ölçeklenebilirliğini göstermektir. PHP karışıma kolayca eklenebilir ve sadece birkaç saat süren geliştirme çalışmalarıyla çok temiz uygulamalar çıkarabilirsiniz.

Liste Küçükleriyle Süslü Tasarım

Uygulayabileceğimiz son bir etki, liste sayfasını canlandırmak için küçük resimlerin kullanılmasıdır. Ayrıca hem resmin başlığını hem de sanatçının adını görüntülemek için metni başlık ve açıklama kutusuna böleceğim..

Photoshop'u açmak ve 80 × 80 piksel boyutta bir belge oluşturmak için. Her resmi hızla yeniden boyutlandıracağım ve küçük resimleri her biriyle eşleşecek şekilde kaydedeceğim. Ardından liste görünümü öğelerini güncelleyerek birkaç öğe daha eklemeliyiz.

Ne demek istediğimi görmek için aşağıdaki kodu ve demo örneğimi inceleyin.

[Canlı Demoyu Önizle]

 
 
  
Wunderkit görevleri
 
Sebastian Scheerer tarafından
 
  
Colleeeeeeeeeeeeege
 
Yazan Scott Hill
 
  
Facebook için forum uygulaması
 
Ionut Zamfir tarafından
 
  
heyecan
 
Yazan Sam Jones
 
 
 

Sınıfları ui-li-başlığı ve ui-Li-azalan jQuery Mobile stil sayfasına varsayılan olarak eklenir. Bu resim sınıfına benzer ui-li-başparmak otomatik olarak her liste görünümü çubuğunu, resim yüksekliğine göre yeniden boyutlandırır. Artık buradan animasyonlar, sayfa efektleri, stil sayfaları vb..

Veya alternatif olarak, yeni görüntüler yüklemek ve listeye dahil edilecek küçük resimleri otomatik olarak kırpmak için bir arka uç sistemi kurmaya başlayabilirsiniz. JQuery Mobile ile o kadar fazla esneklik var ki, onu yalnızca bir JavaScript kitaplığı olarak etiketleyemezsiniz. Hızlı ve ölçeklenebilir mobil uygulamalar oluşturmak için HTML5 / CSS / jQuery çerçevesinden daha fazlası.

Sonuç

Bu makaleyi yazarken jQuery Mobile ekibi resmen kod kütüphanesinin RC1.0'sını çıkardı. Bunun anlamı, ana hata düzeltmelerinin tümü ezilmemişse ve şimdi test ediciler tam sürüm için hazırlanıyorsa bu demektir. Bu nedenle, web üzerinde çok fazla bilgi bulamazsınız..

Ancak aylar geçtikçe web geliştiricileri eğilimi yakalayacağından emin olabilirsiniz. Mobil uygulamalar ve hatta mobil web düzenleri, akıllı telefonlardaki büyük artışla popülerlik kazanıyor. Web geliştiricileri Android / iOS uygulamaları oluşturmak için tam bir programlama dili öğrenmek için zamana sahip değil. Dolayısıyla, jQuery Mobile, mobil endüstri yazılımının çoğunluğuna destek içeren ve aktif bir geliştirici topluluğu ile her gün büyümeye devam eden ince bir alternatiftir..