Mobil Uygulama Tasarımı / jQuery Mobile ile Dev Özel Temalar

Daha önce jQuery Mobile dersinde, temel çerçevenin çoğunu ve ilk web sitenizi nasıl kuracağınıza dair bir fikir vermiştim. JS kütüphanesi, öğrenme zorluğu açısından hem hafif hem de toplanması kolaydır. Ayrıca, dosyalarda bulunan bir CSS stil sayfası da vardır, böylece mizanpajınızdaki öğeleri daha da özelleştirebilirsiniz..

Bu ikinci bölüm için, jQuery Mobile temaları fikrini daha derinden sunarak biraz zaman geçirmek istiyorum. Tüm tasarım endüstrisi, jQM tarafından devrim yarattı ve bir mobil şablonu sıfırdan inşa etme süreci önemli ölçüde geliştirildi. jQuery Mobile sadece bir komut dosyası kütüphanesi değil aynı zamanda etkin mobil şablonlar oluşturmak ve üretmek için temel bir çerçevedir..

Varsayılan Stil Sayfası İçeriği

Tam olarak hangi tür CSS kodlarının varsayılan dosyalara dahil edildiğini netleştirerek başlamalıyım. JQM 1.0'daki stil sayfası iki ana bölüme ayrılmıştır. - yapı ve temalar.

Yapı kodu, çoğunlukla göz ardı edebileceğiniz şeylerdir. Bu, diğer birçok tarayıcı varsayılanıyla birlikte kenar boşluklarını, dolguyu, yüksekliği / genişliği, font değişkenlerini ayarlamak için kullanılır. İç temalar, her biri tasarımınızdaki farklı görsel efektleri kontrol eden A-E'den ayrılmıştır. Bu, arka plan renklerini, degradeleri, alt gölgeleri vb. İçerebilir..

Bu iç tema öğelerinin her biri ayrıca olarak da adlandırılabilir. Bez parçaları. Bir mobil şablon oluşturduğunuzda, genellikle tek bir temaya sadık kalırsınız. Ancak hemen hemen her senaryoda, farklı renk şemaları ile tasarım geliştirilebilir. Varsayılan stil sayfası yalnızca A-E renk örneklerini içerir, ancak tema kitaplığınıza başka 21 alternatif eklemek için F-Z renk örnekleri oluşturabilirsiniz. Sadece bu şartları tekrar netleştirmek için tema 26 adede kadar farklı içerebilen 1 tek CSS dosyası olarak kabul edilir Bez parçaları A-Z etiketli.

Stilleri Değiştirme

Herhangi bir renk örneği belirtmeyi seçmezseniz, jQuery Mobile varsayılan olarak A renk örneğine yapışacaktır. Zaten farkında değilseniz jQuery Mobile docs birçok iç işlev için HTML5 veri özniteliklerini kullanır. Bunlardan biri, veri teması özniteliği yoluyla renk örneklerinin değiştirilmesini içerir. Ne demek istediğimi görmek için aşağıdaki kod örneğime göz atın.

  Varsayılan jQM Sayfası
 
  İşte bazı iç içerik.

Veri teması özniteliğini kök sayfa div'e yerleştirdiğime dikkat edin. Bu, yeni renk örneğinin hem başlığı hem de içerik alanlarını içeren her şeyi etkileyeceği anlamına gelir. Ek olarak içerebilir veri teması = "C" yalnızca bu içeriği sayfamın geri kalanından değiştirmek için başlık divine.

Renk Örneğinin Bileşenleri

Bu farklı renk örneklerinin tek bir düzende nasıl uygulanacağı oldukça açık olmalıdır. Şimdi jQM CSS koduna bir göz atalım, böylece bir renk örneğinin tekil bileşenlerini parçalayabilelim. Kendi CDN'lerinde barındırılan en son jQuery Mobile 1.4.5 CSS dosyasına göz atın.

Her bir renk örneğinin ayrı bir yorumla nasıl ayrıldığını ve iç sınıfların her birinin uygun harflerle nasıl bittiğini fark etmelisiniz. Örneğin .ui-bar-a ve .ui-gövde bir varsayılan olarak üstbilgi / altbilgi çubuklarına ve içerik alanlarına uygulanır. Çoğu özellik yazı tipi ve bağlantı renklerinde, arka plan degradelerinde ve diğer küçük ayrıntılarda bir sıfırlama işlemi gerçekleştiriyor. Ben sadece dahil ui-bar-a hangi öğeleri hedeflediğimiz konusunda size fikir vermek için.

/ * A --------------------------------------------------- ------------------------------------------------ * -bar-a kenarlık: 1px katı # 2A2A2A; arkaplan: # 111111; renk: #ffffff; yazı tipi ağırlığı: kalın; metin gölgesi: 0 / * a-bar-gölge-x * / -1px / * a-bar-gölge-y * / 1px # 000000; background-image: -webkit-gradient (doğrusal, sol üst, sol alt, (# # 3c3c3c) 'den (# 111)' e); / * Saf4 +, Chrome * / arka plan görüntüsü: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / arkaplan resmi: -moz-linear-gradyan (# 3c3c3c, # 111); / * FF3.6 * / arka plan görüntüsü: -ms-linear-gradyan (# 3c3c3c, # 111); / * IE10 * / arka plan görüntüsü: -o-doğrusal-gradyan (# 3c3c3c, # 111); / * Opera 11.10+ * / arka plan görüntüsü: linear-gradyan (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-bir giriş, .ui-bar-bir seçim, .ui-bar-bir textarea, .ui-bar-bir düğme font-family: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-inherit renk: #fff;  .ui-bar-a .ui-link renk: # 7cc4e7 / * a-bar-link-renk * /; yazı tipi ağırlığı: kalın;  .ui-bar-a .ui-link: vurgulu renk: # 2489CE / * a-bar bağlantısı-vurgulu * /;  .ui-bar-a .ui-link: etkin color: # 2489CE / * a-bar-link-etkin * /;  .ui-bar-a .ui-link: ziyaret renk: # 2489CE / * a-bar-link-ziyaret edildi * /;

Sadece özel bir renk örneği oluşturmak istiyorsanız, şablonu orijinallerden birinin üzerine koymanızı öneririz. Yeni bir CSS belgesinde kod yazmaya başlarsanız, işlem çok daha sorunsuz olacaktır. Orijinal dosyada düzenleme zorluğu olmaz ve temiz bir sayfa üzerinde çalışmaya başlayabilirsiniz. Ancak odaklanmak istediğiniz kilit alanlar aşağıdakileri içerecektir:

üstbilgi ve altbilgi çubukları
gövde içeriği ve sayfa metni
liste stilleri
düğme varsayılan / vurgulu / etkin durumlarını gösterir
form giriş kontrolleri (ekstra)

Yeni Bir Bar Tasarımını Kodlamak

Aynı CSS dosyasından daha önce inceledik, tüm renk örneği A kodunu kopyalayıp yapıştırın (12-150 satırları) yeni bir dosyaya. Bu yeni stilleri uygulamak için G renk örneğini kullanabiliriz. Şimdi kodu kopyaladıktan sonra, içinde biten her bir sınıf örneğini yeniden adlandırmak istiyorsunuz. -bir için -g, jQuery Mobile'ın hangi stilleri kullanacağını nasıl tanıyacağı.

Daha tanıdık bir iOS gradyanını taklit etmek için bg başlık çubuğunu yeniden tasarlayarak başlamak istiyorum. Bu sadece içinde yapılabilir .ui-bar-g Seçici. Degrade efektlerini değiştirmek için arka plan ve arka plan görüntüsü özelliklerini düzenlemek istiyoruz. Aşağıdaki koduma ve yeni degradenin demo ekranına göz atın.

.ui-bar-g kenarlık: 1px katı # 2d3033 / * a-kenarlık sınırı * /; sınır-sol: 0 piksel; sınır-sağ: 0 piksel; arkaplan: # 6d83a1; renk: #fff / * a-bar-color * /; yazı tipi ağırlığı: kalın; text-shadow: 0 / * a-bar-gölge-x * / -1px / * a-bar-gölge-y * / 1px / * a-bar-gölge-yarıçapı * / # 3e4957; background-image: -webkit-gradyanı (doğrusal,% 0% 0,% 0,% 100, from (# b4bfce), renk durağı (0.5, # 899cb3), renk durağı (0.505, # 7e94b0), (# 6d83a1)); background-image: -webkit-linear-gradyan (üst, # b4bfce, # 899cb3% 50, # 7e94b0% 52, # 6d83a1); / * Chrome 10+, Saf5.1 + * / arka plan görüntüsü: -moz-linear-gradyan (üst, # b4bfce, # 899cb3% 50, # 7e94b0% 52, # 6d83a1); / * FF3.6 * / arka plan görüntüsü: -ms-linear-gradyan (üst, # b4bfce, # 899cb3% 50, # 7e94b0% 52, # 6d83a1); / * IE10 * / arka plan görüntüsü: -o-doğrusal-gradyan (üst, # b4bfce, # 899cb3% 50, # 7e94b0% 52, # 6d83a1); / * Opera 11.10+ * / arka plan görüntüsü: doğrusal gradyan (üst, # b4bfce, # 899cb3% 50, # 7e94b0% 52, # 6d83a1);

Çoğu varsayılan iOS uygulamasında bulunan mavi renk şemasını kullanıyorum. Arka planım başlangıçta CSS3 degradeleri oluşturamayan cihazlar için düz bir renge ayarlandı. Sonra aşağıda geleneksel Apple tarzı parlak parlaklık efekti yeniden oluşturmak için% 50 marker etrafında renk durakları kullanıyorum. Ayrıca aynı seçicinin içinde Metin gölgesini daha ince bir renk ve aralıkla biraz değiştirdim.

Düğmeler ve Metin Efektleri

Renk örneklerini kodlarken, özellikle arabirimin hangi alanlarının dikkat etmesi gerektiğini göz önünde bulundurmak önemlidir. Başlık çubuğu bu yeni arka planla harika görünüyor, ancak yapmak istediğim son bir değişiklik iOS uygulamalarınınkine daha yakın olan düğme stilleriyle eşleşecek.

.ui-btn-up-g sınır: 1 piksel katı # 375073; arkaplan: # 4a6c9b; yazı tipi ağırlığı: kalın; renk: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; kutu-gölge: yok; -webkit-box-shadow: none; -moz-box-shadow: yok; background-image: -webkit-gradyanı (doğrusal,% 0% 0,% 0% 100, from (# # 89a0be), renk durağı (0.5, # 5877a2), renk durağı (0.505, # 476999), ila (# 4a6c9b)); background-image: -webkit-linear-gradyan (üst, # 89a0be, # 5877a2% 50, # 476999% 52, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradyan (üst, # 89a0be, # 5877a2% 50, # 476999% 52, # 4a6c9b); / * FF3.6 * / arka plan görüntüsü: -ms-linear-gradyan (üst, # 89a0be, # 5877a2% 50, # 476999% 52, # 4a6c9b); / * IE10 * / arka plan görüntüsü: -o-doğrusal-gradyan (üst, # 89a0be, # 5877a2% 50, # 476999% 52, # 4a6c9b); / * Opera 11.10+ * / arka plan görüntüsü: doğrusal gradyan (üst, # 89a0be, # 5877a2% 50, # 476999% 52, # 4a6c9b); sınır yarıçapı: 4px; -webkit-border-radius: 4px; -moz-sınır yarıçapı: 4px;  .ui-btn-up-g .ui-btn-iç, .ui-btn-hover-g .ui-btn-iç, .ui-btn-aşağı-g .ui-btn-iç sınır yarıçapı: 0; -webkit-border-radius: 0; -moz-sınır yarıçapı: 0;  .ui-btn-hover-g sınır: 1px katı # 1b49a5; arkaplan: # 2463de; yazı tipi ağırlığı: kalın; renk: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; kutu-gölge: yok; -webkit-box-shadow: none; -moz-box-shadow: yok; background-image: -webkit-gradyanı (doğrusal,% 0% 0,% 0% 100, den (# # 779be9), renk durağı (0,5, # 376fe0), renk durağı (0,505, # 2260dd), (# 2463de)); background-image: -webkit-linear-gradyan (üst, # 779be9, # 376fe0% 50, # 2260dd% 52, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradyan (üst, # 779be9, # 376fe0% 50, # 2260dd% 52, # 2463de); / * FF3.6 * / arka plan görüntüsü: -ms-linear-gradyan (üst, # 779be9, # 376fe0% 50, # 2260dd% 52, # 2463de); / * IE10 * / arka plan görüntüsü: -o-doğrusal-gradyan (üst, # 779be9, # 376fe0% 50, # 2260dd% 52, # 2463de); / * Opera 11.10+ * / arka plan görüntüsü: doğrusal gradyan (üst, # 779be9, # 376fe0% 50, # 2260dd% 52, # 2463de); sınır yarıçapı: 4px; -webkit-border-radius: 4px; -moz-sınır yarıçapı: 4px;

Şimdi düzenlemekte olduğumuz kod alanı, UI düğmesi sınıfları içinde. İlgilenmeniz gereken 3 farklı mod vardır: .ui-btn-yukarı-g, .ui-btn-vurgulu-g, ve .ui-btn aşağı-g. Kutu gölgesini ve doğrusal degradeleri düzenleyerek çoğunlukla standart (btn-up) ve hover (btn-hover) efektlerine odaklanıyorum. Ayrıca yuvarlatılmış köşelerin efektini genişlettim, böylece düğmeler daha dikdörtgen görünecek.

Bundan dolayı, iç sınır yarıçapını başlıklı bir sınıftan çıkarmam gerekiyordu. .ui-btn-iç. Bu sınıf, başlık çubuğunuzdaki her bağlantı bağlantısındaki bir yayılma öğesinin üstüne eklenir. Kenarlık yarıçapı özelliklerini sıfırlamadan, bir düğmenin üzerine geldiğinizde tasarımda küçük aksaklıklar göreceksiniz. JQuery Mobile temalarına kodlamada daha fazla zaman harcadığınızda, gelecekteki projeler için bu küçük nüansları ezberleyeceksiniz..

ThemeRoller'a Giriş

Ellerinizi kodda kirletmekten hoşlanıyorsanız, özel düzenlemelere uymanızı şiddetle tavsiye ederim. Sadece daha fazla kontrol sahibi değil, tüm düzenlemeleri kendiniz yaptıysanız, CSS içindeki sorunları ayıklamak çok daha kolaydır. Ancak birçok tasarımcı için bu işlem yorucu bir işlemdir ve gerekenden daha uzun sürecektir. Neyse ki jQuery Mobile ekibi, ThemeRoller adı altında bir çevrimiçi editör yayınladı..

Bu sayfadan ilk 3 A-C renk örneğini düzenleme ve hatta kendinizinkini oluşturma erişimine sahipsiniz. Sol kenar çubuğuna bakarsanız, bu 3 ayar arasında geçiş yapabilir veya genel tema seçeneklerinde hızlıca değişiklik yapabilirsiniz. Bunlar, sınır yarıçapı, kutu gölgeleri veya varsayılan sayfa fontları gibi CSS özelliklerini içerir. Önceden ayarlanmış renk örneklerinden herhangi birini seçerken, yalnızca önceki - üst / alt çubuklar, gövde içeriği ve 3 düğme durumuyla aynı alanları düzenleyebileceğimize dikkat edin..

Ancak en sevdiğim özellik Adobe Kuler örneklerine doğrudan erişim olmalı. Aslında Kuler hesabınızda birkaç renk şeması oluşturabilir ve bunları ThemeRoller'a aktarabilirsiniz. Arayüz sürükle ve bırak fonksiyonelliğini destekler, böylece birkaç dakika içinde birkaç farklı fikri denemek çok kolaydır..

Sonuçta, jQM örneklerinizi düzgün bir şekilde oluşturmak için kesin bir yöntem yoktur. Bazı tasarımcılar CSS'yi kodlamayı tercih ederken, bazıları sezgisel ThemeRoller web uygulamasını sevecektir. Sınıf yapısını takip ettiğiniz sürece her iki şekilde de aynı sonuçları almalısınız..

Faydalı Kaynaklar

jQuery Mobil Temaları - Belgeler
JQuery Mobile temalarını kullanma ve özelleştirme