JQuery Mobile ile bir mobil web sitesi oluşturun

İçerik

• Tek bir HTML dosyasında birden çok sayfa nasıl kodlanır
• Açıklama
• İletişim kutuları ve geçişler nasıl kullanılır
• Kullanılabilecek geçişler
• Açıklama
• Düğmeler nasıl oluşturulur
• Açıklama
• Gezinme çubuğu nasıl oluşturulur
• Gezinme çubuğu için HTML nasıl kodlanır:
• JQuery Mobile ile içerik nasıl biçimlendirilir
• JQuery Mobile'ın kullandığı varsayılan stiller
• Açıklama
• HTML öğelerine temalar nasıl uygulanır
• Bir tema uygulamanın iki yolu:
• Açıklama
• Perspektif

Bu, 15. Bölümden düzenlenmiş bir alıntıdır. Murach’ın HTML5 ve CSS3 Zak Ruvalcaba ve Anne Boehm tarafından.

jQuery Mobile, mobil web siteleri geliştirmek için kullanabileceğiniz ücretsiz, açık kaynaklı, çapraz platformlu bir JavaScript kitaplığıdır. Bu kitaplık, yerel bir mobil uygulamanın sayfaları gibi görünen ve hissettiren sayfalar oluşturmanıza olanak tanır.

JQuery Mobile şu anda bir beta test sürümü olarak mevcut olsa da, bu sürüm mükemmel bir mobil web sitesi geliştirmek için ihtiyacınız olan tüm özellikleri zaten sağlıyor. Sonuç olarak hemen kullanmaya başlayabilirsiniz. Ayrıca bu sürümün sürekli olarak geliştirilmesini bekleyebilirsiniz, böylece jQuery Mobile yalnızca daha iyi hale gelecektir.

Bu makalede, bir mobil web sitesinin sayfalarını oluşturmanın temel tekniklerini öğreneceksiniz. Bu, iletişim kutularının, düğmelerin ve gezinme çubuklarının kullanımını içerecektir.

Tek bir HTML dosyasında birden çok sayfa nasıl kodlanır

Bir ekran web sitesi için web sayfalarını geliştirme şeklinizin aksine, jQuery Mobile, tek bir HTML dosyasında birden çok sayfa oluşturmanıza izin verir. Bu, şekil 15-7'de gösterilmektedir. Burada, bu sayfaların HTML'si ile birlikte bir sitenin iki sayfasını görebilirsiniz. Şaşırtıcı olan, her iki sayfanın da tek bir HTML dosyası içinde kodlanmış olmasıdır.

Her sayfa için, data-role özniteliğinin değeri "page" olan bir div öğesi kodlarsınız. Daha sonra, bu div öğelerinin her birinde, her sayfanın üstbilgisi, içeriği ve altbilgisi için div öğelerini kodlarsınız. Daha sonra HTML dosyası yüklendiğinde, dosyanın gövdesindeki ilk sayfa görüntülenir.

HTML dosyasındaki sayfalar arasında bağlantı kurmak için, 7. bölümdeki şekil 7-11'de gösterildiği gibi yer tutucular kullanırsınız. Örneğin, bu örnekte ilk sayfadaki a> öğesi, kullanıcı ekrana dokunduğunda "#toobin" e gider. Bu bağlantının içeriği olarak kodlanmış h2 veya img öğesi. Bu, id özniteliği olarak "toobin" olan div öğesine başvurur; bu, bağlantıya dokunmanın okuyucuyu dosyadaki ikinci sayfaya götürdüğü anlamına gelir.

Bu örnekte yalnızca iki sayfa gösterilmesine rağmen, tek bir HTML dosyası içinde birçok sayfayı kodlayabilirsiniz. Yine de, tüm sayfaların resimleri, JavaScript ve CSS dosyalarıyla birlikte tek bir HTML dosyasıyla yüklendiğini unutmayın. Sonuç olarak, tek bir dosyada çok fazla sayfa depolarsanız yükleme süresi aşırı hale gelecektir. Bu olduğunda, sayfalarınızı birden fazla HTML dosyasına bölebilirsiniz.

Bir HTML dosyasının gövdesindeki iki sayfanın HTML'si:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> 2011-2012 Hoparlörler / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 Ekim 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - KONUŞMACILARIN GERİ KALAN UNSURLARI - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> başlık verisi-role = "başlık"> h1> SJV Belediye Binası / h1> / header> bölüm data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Eleştirmenlerce beğenilen çok satan kitabın yazarı i> The Nine:! - KOPYA DEVAM EDİYOR -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Açıklama

• JQuery Mobile kullandığınızda, her sayfa için ayrı bir HTML dosyası geliştirmeniz gerekmez. Bunun yerine, tek bir HTML dosyasının gövde öğesi içinde, data-role özniteliği "page" olarak ayarlanmış her sayfa için bir div öğesi kodlarsınız.
• Her div öğesi için, id niteliğini, diğer sayfaların a> öğelerindeki href öznitelikleriyle erişilebilen bir yer tutucu değerine ayarlarsınız.

İletişim kutuları ve geçişler nasıl kullanılır

Şekil 15-8, bir bağlantıya dokunulduğunda açılan bir iletişim kutusunun nasıl oluşturulacağını gösterir. Bunu yapmak için, iletişim kutusunu herhangi bir sayfada yaptığınız gibi kodlayın. Ancak o sayfaya giden a> öğesinde, değeri "dia-log" olan bir data-rel özniteliğini kodlarsınız.

Bu şekildeki örneklerin gösterdiği gibi, jQuery Mobile CSS dosyası bir iletişim kutusunu normal bir web sayfasından farklı bir şekilde biçimlendirir. Varsayılan olarak, bir iletişim kutusunun beyaz ön plan metniyle koyu bir arka planı olacaktır ve üstbilgi ve altbilgi sayfanın genişliğine yayılmayacaktır. Bir iletişim kutusunun üstbilgisinde, kullanıcının önceki sayfaya dönmek için dokunması gereken bir "X" işareti de olacaktır.

Başka bir sayfaya veya iletişim kutusuna giden bir a> öğesini kodladığınızda, bu şekildeki tabloda özetlenen altı geçişten birini belirtmek için veri geçiş özniteliğini de kullanabilirsiniz. Bu geçişlerin her biri, iPhone gibi bir mobil aygıtın kullandığı bir etkiyi taklit etmek içindir.

Kullanılabilecek geçişler

Sayfayı "pop" geçişli bir iletişim kutusu olarak açan HTML:

a href = "# toobin" data-rel = "dialog" data-transition = "pop">

Sayfayı "solma" geçişiyle açan HTML:

a href = "# toobin" data-transition = "fade">

Açıklama

• Bir için HTML iletişim kutusu herhangi bir sayfanın kodlandığı şekilde kodlanır. Bununla birlikte, sayfaya bağlanan a> öğesi, değeri "dialog" ile birlikte data-rel özniteliğini içerir. İletişim kutusunu kapatmak için, kullanıcı kutunun başlığındaki X'e dokunur.
• Bir sayfanın veya iletişim kutusunun açılma şeklini belirlemek için, veri geçiş özelliğini yukarıdaki tablodaki değerlerden biriyle kullanabilirsiniz. Bir cihaz belirttiğiniz geçişi desteklemiyorsa, özellik yok sayılır.
• Bir iletişim kutusunun stili jQuery Mobile CSS dosyası tarafından yapılır.

Düğmeler nasıl oluşturulur

Şekil 15-9, bir sayfadan diğerine gitmek için düğmelerin nasıl kullanılacağını gösterir. Bunu yapmak için, bir> öğesinin veri rolü özniteliğini "düğme" olarak ayarlamanız yeterlidir ve gerisini jQuery Mobile halleder.
Bununla birlikte, düğmeler için başka öznitelikler de ayarlayabilirsiniz. Örneğin, bu şekildeki ilk iki düğme gibi iki veya daha fazla düğmenin yan yana görünmesini istiyorsanız, data-inline özniteliğini "true" olarak ayarlayabilirsiniz.

JQuery Mobile tarafından sağlanan 18 simgeden birini bir düğmeye eklemek isterseniz, veri simgesi özniteliğini de kodlarsınız. Örneğin, bu örnekteki üçüncü düğme "sil" simgesini ve dördüncü düğme "ana sayfa" simgesini kullanır. Bu simgelerin tümü, yerel bir mobil uygulamada görebileceğiniz simgelere benziyor. Bu arada, bu simgeler sayfanın erişmesi gereken ayrı dosyalar değildir. Bunun yerine, jQuery Mobile kitaplığı tarafından sağlanırlar.

Bu şekildeki Evet, Hayır ve Belki düğmeleri gibi iki veya daha fazla düğmeyi yatay olarak gruplamak istiyorsanız, veri rolü özelliği olarak "kontrol grubu" olan bir div öğesi içindeki düğmeler için a> öğelerini kodlayabilirsiniz ve Veri türü özelliği olarak "yatay". Veya düğmeleri dikey olarak gruplamak için veri türü özelliğini "dikey" olarak değiştirebilirsiniz.

Bir düğme için data-rel özniteliğini "geri" olarak ve href özniteliğini pound sembolüne (#) ayarlarsanız, düğme onu çağıran sayfaya geri döner. Başka bir deyişle, düğme Geri düğmesi gibi çalışır. Bu, sayfanın içeriğindeki son düğme ile gösterilmiştir.

Son iki düğme, düğmelerin bir sayfanın altbilgisinde nasıl göründüğünü gösterir. Burada simgeler ve metin siyah bir arka plana karşı beyazdır. Bu durumda, altbilginin sınıf özniteliği, jQuery Mobile'a altbilginin içeriğinin etrafına biraz daha fazla boşluk koyması gerektiğini söyleyen "ui-bar" olarak ayarlanır. Şekil 15-12'de bununla ilgili daha fazla bilgi edineceksiniz.

Bölümdeki düğmeler için HTML:

! - Satır içi düğmeler için data-line özelliğini true olarak ayarlayın -> a href = "#" data-role = "button" data-inline = "true"> İptal / a> a href = "#" data -role = "button" data-inline = "true"> Tamam / a>! - Bir düğmeye simge eklemek için, data-icon özelliğini -> a href = "#" data-role = "düğmesini kullanın "data-icon =" delete "> Sil / a> a href =" # "data-role =" button "data-icon =" home "> Ana Sayfa / a>! - Düğmeleri gruplamak için bir div öğesi kullanın aşağıdaki özellikler -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Evet / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Hayır / a> a href = "#" data-role = "button"> Belki / a> / div>! - Kime bir Geri kodu kodlayın, data-rel özelliğini geri olarak ayarlayın -> a href = "#" data-role = "button" dat-rel = "geri" data-icon = "geri"> Önceki sayfaya dön / a >

Altbilgideki düğmeler için HTML:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Facebook'a Ekle / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Bu Sayfayı Tweetle / a> / footer>

Açıklama

• Bir web sayfasına düğme eklemek için, veri rolü özniteliği "düğme" olarak ayarlanmış bir a> öğesini kodlarsınız.

Gezinme çubuğu nasıl oluşturulur

Şekil 15-10, bir web sayfasına nasıl gezinme çubuğu ekleyebileceğinizi gösterir. Bunu yapmak için, veri rolü "navbar" olarak ayarlanmış bir div öğesini kodlarsınız. Bu öğenin içinde, gezinme çubuğundaki öğeler için a> öğelerini içeren li öğelerini içeren bir ul öğesini kodlarsınız. Ancak, a> öğeleri için data-role özniteliğini kodlamadığınızı unutmayın.

Gezinme çubuğundaki öğelerin rengini değiştirmek için, bu örnekteki kod, her öğe için data-theme-b özelliğini içerir. Sonuç olarak, jQuery Mobile her bir öğenin arka plan rengini varsayılan olan siyahtan çekici bir maviye değiştirir. Ek olarak, bu kod, etkin düğmenin sınıf özniteliğini "ui-btn-active" olarak ayarlar, böylece jQuery Mobile etkin düğmenin rengini daha açık maviye değiştirir. Bu, jQuery Mobile tarafından kullanılan biçimlendirmeyi nasıl değiştirebileceğinizi gösterir ve bundan sonra bunun hakkında daha fazla bilgi edineceksiniz.

Gezinme çubuğunun HTML'si:

başlık data-role = "header"> h1> SJV Belediye Binası / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Ana Sayfa / a> / li> li> a href =" # hoparlörler "data-icon =" star "data-theme =" b "> Hoparlörler / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Bize Ulaşın / a> / li> / ul> / div> / header>

Gezinme çubuğu için HTML nasıl kodlanır:

• Başlık öğesi içinde bir div öğesi kodlayın. Ardından, div öğesi için data-role özniteliğini "navbar" olarak ayarlayın.
• Div öğesi içinde, her bağlantı için bir li öğesi içeren bir ul öğesi kodlayın.
• Her li öğesinin içinde, bağlantının gitmesi gereken sayfa için bir yer tutucu kullanan bir href özniteliğine sahip bir a> öğesini kodlayın. Ardından, data-icon özniteliğini seçtiğiniz simgeye ayarlayın.
• Gezinme çubuğundaki etkin öğe için, sınıf özniteliğini "ui-btn-active" olarak ayarlayın. Ardından, bu öğenin rengi gezinme çubuğundaki diğer öğelerden daha açık olacaktır.
• Gezinme çubuğundaki her bir öğeye bir jQuery Mobile teması uygulamak için veri teması özniteliğini de kullanmalısınız. Aksi takdirde, çubuktaki düğmeler başlığın geri kalanıyla aynı renkte olacaktır. Temaları uygulama hakkında daha fazla bilgi edinmek için şekil 15-12'ye bakın.

JQuery Mobile ile içerik nasıl biçimlendirilir

Daha önce gördüğünüz gibi jQuery Mobile, bir web sayfasının bileşenlerini kendi stil sayfasına göre otomatik olarak biçimlendirir. Şimdi, bunun yanı sıra jQuery Mobile'ın kullandığı varsayılan stili nasıl ayarlayacağınız hakkında daha fazla bilgi edineceksiniz.

JQuery Mobile'ın kullandığı varsayılan stiller

Şekil 15-13, jQuery Mobile'ın yaygın HTML öğeleri için kullandığı varsayılan stilleri gösterir. Tüm stilleri için jQuery Mobile, tarayıcının oluşturma motorunu kullanır, bu nedenle kendi stili minimumdur. Bu, yükleme sürelerini hızlı tutar ve aşırı CSS'nin bir sayfaya yükleyeceği yükü en aza indirir.

Gördüğünüz gibi, jQuery Mobile'ın stili o kadar etkilidir ki, kendi CSS stil sayfanızı sağlayarak stilini değiştirmenize gerek kalmaz. Örneğin, sırasız listedeki öğeler arasındaki boşluk ve tablonun biçimlendirmesi olduğu gibi kabul edilebilir. Ayrıca, gri arka plandaki siyah yazı, yerel mobil uygulamalar için biçimlendirmeyle tutarlıdır.

Açıklama

• Varsayılan olarak jQuery Mobile, stilleri bir sayfanın HTML öğelerine otomatik olarak uygular. Bu stiller sadece çekici olmakla kalmaz, aynı zamanda bir tarayıcının yerel stillerini de taklit eder.
• Varsayılan olarak jQuery Mobile, her mobil sayfanın soluna, sağına, üstüne ve altına az miktarda dolgu uygular.
• Varsayılan olarak, bağlantılar normal metinden biraz daha büyüktür. Bu, kullanıcının bağlantılara dokunmasını kolaylaştırır.
• Varsayılan olarak, bağlantıların altı yazı tipi rengi olarak maviyle çizilir.

HTML öğelerine temalar nasıl uygulanır

Bazı durumlarda, jQuery Mobile'ın kullandığı varsayılan stilleri değiştirmek isteyebilirsiniz. Bunu şekil 15-10'daki gezinme çubuğunda zaten görmüştünüz. Varsayılan stilleri değiştirmek için jQuery Mobile'ın sağladığı beş temayı kullanabilirsiniz. Bunlar şekil 15-12'de özetlenmiştir. Burada yine, bu temaların yerel bir mobil uygulamanın görünümünü taklit etmesi amaçlanmıştır.

Temaları uygulamanın bir yolu, bir veri teması özelliğini, değeri olarak tema harfiyle kodlamaktır. Bunu şekil 15-10'daki gezinme çubuğunda gördünüz ve bunu bu şekildeki ikinci gezinme çubuğunun kodunda görebilirsiniz. Burada, veri teması özniteliği başlığa "e" temasını ve gezinme çubuğundaki öğelere "d" temasını uygular.

Temaları uygulamanın diğer yolu, bir öğenin sınıf özniteliğini temayı belirten bir sınıf adına ayarlamaktır. Bu, tablodan sonraki ilk örnekle gösterilmiştir. Burada, "ui-bar" ve "ui-bar-b" sınıflarının her ikisini de div öğesine uygulamak için class özelliği kullanılır. Sonuç olarak, jQuery Mobile önce bir çubuk için varsayılan stilini öğeye uygular ve ardından b temasını bu stile uygular. Takip eden sayfalarda, bu tarz stilin diğer örneklerini göreceksiniz.

Lütfen bu şekildeki tablonun e temasının idareli kullanılmasını söylediğine dikkat edin. Bunun nedeni, bir öğeyi vurgulamak için iyi çalışan, ancak büyük dozlarda çekici olmayan turuncu bir renk kullanmasıdır. Bu, bu şekildeki ikinci başlık ve gezinme çubuğu ile gösterilmektedir ve renkli gördüğünüzde sarsıcı olma eğilimindedir.

Genel olarak, genellikle birlikte iyi çalışan varsayılan stiller ve ilk üç temayla kalmak en iyisidir. Ardından, daha fazlasına ihtiyacınız olduğunu düşündüğünüzde d ve e temalarını deneyebilirsiniz.

İkinci başlık ve gezinme çubuğunun HTML'si:

header data-role = "header" data-theme = "e"> h1> SJV Belediye Binası / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Ev / a> / li> li> a href =" # hoparlörler "data-icon =" star "data-theme =" d "> Hoparlörler / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Haberler / a> / li> / ul> / div> / başlık>

Beş jQuery Mobile teması:

Bir tema uygulamanın iki yolu:

Bir veri teması özniteliği kullanarak:

li> a href = "# home" data-icon = "home" data-theme = "b"> Ana Sayfa / a> / li>

Temayı belirten bir sınıf özniteliği kullanarak:

div> Çubuk / böl>

Açıklama

• JQuery Mobile'da bulunan beş temayı kullanarak, HTML öğeleri için varsayılan stillerde uygun ayarlamalar yapabilirsiniz.
• Bir jQuery Mobile uygulamasıyla kendi CSS stil sayfanızı kullanabilseniz de, bunu mümkün olduğunca yapmaktan kaçınmalısınız.

Perspektif

Mobil cihazların kullanımı son birkaç yılda önemli ölçüde arttı. Bu nedenle kullanımı kolay web sitelerinin bu cihazlardan tasarlanması giderek önem kazanmaktadır. Bu genellikle ayrı bir web sitesi geliştirmek anlamına gelse de, bu İnternetteki varlığınızı sürdürmenin kritik bir yönü olabilir.

Neyse ki, bir mobil web sitesi oluşturma görevi jQuery Mobile'ın gelişiyle çok daha kolay hale geldi. Artık mobil web sayfaları başlık, paragraf, bağlantı ve küçük resim içeren statik sayfalarla sınırlı değil. JQuery Mobile ile web geliştiricileri artık yerel mobil uygulamalar gibi görünen ve hissettiren zengin özelliklere sahip web siteleri oluşturabilirler.