JQuery ile Mobil Uygulama Tasarımı / Dev Building Navigation

Akıllı telefonlar şimdi çok verimli bazı web tarayıcılarıyla donatılmıştır. JavaScript her zamankinden daha güçlü ve jQuery gibi kod kütüphaneleri yardımı ile genişletilebilir. En son HTML5 / CSS3 özelliklerine eklediğinizde, bazı temel kod kodları ile çok hızlı mobil web uygulamaları oluşturmak mümkündür.

Bu derste, mobil tabanlı bir web sitesi / webapp'ı nasıl oluşturabileceğinizi göstereceğim. Belirli cihazları ve ekran çözünürlüklerini hedeflemek için CSS3 medya sorgularını kullanacağız. Ayrıca bir miktar jQuery, menüyü canlandırmaya ve Ajax aramalarını kullanarak harici sayfa içeriğini yüklemeye yardımcı olur. Daha da iyisi, düzen Chrome veya Firefox gibi normal masaüstü tarayıcılarında düzgün şekilde görüntülenmek üzere genişletilebilir.

• Canlı Demo
• Kaynak kodu

Sayfa Yapısını Tanımlama

Önce HTML sayfasını gözden geçirerek başlayalım ve bazı CSS kurallarını kullanarak stillendirelim. Web uygulamasını doğrudan etkilemedikleri için başlıktaki olağandışı meta etiketlerin çoğunu atlayacağım. Ancak, bahsetmem gereken birkaç tane var, yani aşağıdaki kod parçasından:

X-UA uyumlu Belgenizin belirli tarayıcılarda nasıl oluşturması gerektiğini açıklamak için kullanılır. HTML5'te kodlama yaparken ilginç bir senaryo, bu yüzden bu konuda çok fazla endişelenmem. Ancak meta viewport etiketi çok önemlidir. Mobil tarayıcı penceresini standart yakınlaştırılmış efekt yerine% 100 olarak ayarlar.

İçerik değerini kullanarak kullanıcı yakınlaştırmayı devre dışı bırakmak da mümkündür kullanıcı ölçeklenebilir = no. Ancak bu durumda tam ekran genişliğini aygıt genişliğimizle aynı olacak şekilde ayarlamak istiyoruz. Apple web uygulaması etiketleri, web sitesinin iPhone veya iPod Touch'ınıza ana ekran simgesi olarak kaydedilmesini sağlar. Tamamen gerekli değil ama kesinlikle değer.

İç Gövde İçeriği

Gövde etiketi içinde ID ile bir sarmalayıcı div kurdum #W. İçeride ID'yi kullanarak mizanpajı iki divs'e daha ayırdım #pagebody ve #navmenu. Tüm sayfa genişliği 640 piksel ile sınırlıdır, böylece düzen katı bir sayıya ölçeklenir.

 
  
HK Mobil
 
 
 
Mobil Siteye Hoşgeldiniz!
 
 
 
 
 
Menü Bağlantıları
 
 
 
Ev
 
Hakkımızda
 
duyurmak
 
Bize Yazın
 
İletişim
 
Gizlilik Politikası
 
 
 

Navigasyon menüsüne daha düşük bir Z-indeksi değeri verilir. #pagebody her zaman üsttedir. Bu çok önemlidir, çünkü JavaScript kodu altındaki gezinmeyi ortaya çıkarmak için sayfa gövdesi üzerinde belirli sayıda piksel kayar..

Mobile Safari'de bazı kötü davranışları durdurmak için her .html sayfasının önünde bir karma sembolü (#) kullandım. Bir bağlantıya tıkladığınızda URL çubuğu görünür ve içeriği aşağı iter. Ancak bir ID'ye referans verirken, JavaScript çağrıları dışında hiçbir şey yeniden yüklenmez.

CSS Konumlandırma

CSS kodumuzda pek fazla kafa karıştırıcı içerik yok. Konumlandırmanın çoğu manuel olarak yapılır ve daha sonra jQuery aracılığıyla manipüle edilir. Ancak belgemizde ilginç birkaç parça var..

/ ** @group'ın çekirdek gövdesi ** / #w #pagebody position: relat; solda: 0; maksimum genişlik: 640px; min-genişlik: 320 piksel; z-endeksi: 99999;  #w #navmenu background: # 475566; yükseklik:% 100; Ekran bloğu; pozisyon: sabit; genişlik: 300px; sol: 0 piksel; üst: 0 piksel; z-endeksi: 0; 

Bu üst segment, sayfanın her iki bölümü için de stilleri tanımlar. Nav menümüz yalnızca 300 piksel genişliğindedir, bu nedenle sayfa içeriğinin görünmemesi için biraz yer bırakır. Aç / kapat menü düğmesi de doğrudan sol tarafta bulunur ve daima erişilebilir durumdadır. Buradaki önemli parça z-index özellik değeri ve kullanımı pozisyon: sabit; bizim donanmada.

Üst araç çubuğu başlığı da ilginç bir bölümdür. Bu, sabit bir konuma ayarlanır, böylece sayfa içeriğiyle birlikte kaydırılır. Bu, herhangi bir iOS uygulaması başlık çubuğunda bulacağınız benzer bir efekti çoğaltır.

/ ** @group başlık ** / #w #pagebody başlık # toolbarnav display: block; pozisyon: sabit; sol: 0 piksel; üst: 0 piksel; z-endeksi: 9999; arkaplan: # 0b1851 url ('img / tabbar-solid-bg.png') üst sol tekrarlama yapılmadı; sınır yarıçapı: 5 piksel; -moz-sınır yarıçapı: 5px; -webkit-border-radius: 5px; -o sınır yarıçapı: 5px; sınır-alt-sağ yarıçapı: 0; -moz-sınır-yarıçapı-dipte: 0; -webkit-border-alt-sağ yarıçapı: 0; sınır-alt-sol yarıçapı: 0; -moz-sınır-yarıçapı-alt-yarıçapı: 0; -webkit-border-sol-yarıçapı: 0; yükseklik: 44px; genişlik:% 100; maksimum genişlik: 640px;  #w #pagebody başlık # toolbarnav h1 text-align: center; dolgu üst: 10px; sağa dolgu: 40px; renk: # e6e8f2; yazı tipi ağırlığı: kalın; yazı tipi boyutu: 2.1em; metin gölgesi: 1 piksel 1 piksel 0 piksel # 313131; 

Mobil Kurallar

Ayrıca mavi başlık çubuğu dokusu için arka plan görüntüsü kullandığımı fark etmek kolaydır. Bu, tutarlı düzen yapısına uyması için 640 × 44 piksel boyutundadır. Ama aynı zamanda iPhone / iPad retina ekranları için @ 2x bir görüntü geliştirdim. Her iki resmi de görebilir veya demo kaynak kodumdan çekebilirsiniz.

• System/demo/img/[email protected]
• System/demo/img/[email protected]

Bu işlevsellik için mobil CSS’yi başka bir dosyada kurdum responsive.css. Bg başlık çubuğunun yerini alan iki ortam sorgusu ve retina aygıtları için menü düğmesi simgesini içerir..

/ ** retina ekran ** / @media sadece ekran ve (-webkit-min-cihaz-piksel oranı: 2), sadece ekran ve (min - moz-cihaz-piksel oranı: 1.5), sadece ekran ve ( min-device-pixel-rate: 1.5) #w #pagebody başlığı background: # 0b1851 url ('img/[email protected] ') üst sol tekrarlama; arkaplan büyüklüğü: 640px 44px;  #w #pagebody başlığı # menu-btn background: url ('img/[email protected] ') no-tekrar; arkaplan büyüklüğü: 53px 30px; 

Menü Oklarını Tasarlama

Gezinti alanına ayrıca her menü bağlantısının sağ tarafına küçük bir ok simgesi ekledim. Bu kolayca herhangi bir yaratıcı commons resminden bir görüntü ile değiştirilebilir. Ancak çoğunlukla tüm CSS3 meraklıları bu yöntemi test etmeyi seveceklerdir.

#w #navmenu ul li a :: after content: "; display: block; width: 6px; yükseklik: 6px; border-right: 3px katı # d0d0d8; border-top: 3px solid # d0d0d8; position: absolute; right : 30px; üst:% 45; -webkit-dönüşümü: döndürme (45deg); -moz-dönüşümü: döndürme (45deg); -o-dönüşümü: döndürme (45deg); dönüştürme: döndürme (45deg); ul li a: hover :: after border-color: # cad0e6;

Kullanıyoruz dönüştürmek içerikten sonra küçük bir sınır oluşturma özelliği. Ben de kurdum pozisyon: mutlak; Böylece bu sınırları iç bağlantı öğesinin etrafında serbestçe hareket ettirebiliriz. Sınır rengini daha dinamik bir his sunan vurgulu bir durumda değiştirmek süper kolaydır. Temel HTML5 ve CSS3 kurallarını kullanarak başarabilecekleriniz oldukça inanılmaz..

Fakat şimdi JavaScript kodunun parçalarına ve parçalarına geçelim. Unutma, kodumun düzgün çalışması için jQuery kütüphanesine bir ekleme yapılmasını gerektirir..

jQuery Animasyonlu

Bu özel kodları yazarken adında yepyeni bir belge oluşturdum script.js. Bunları doğrudan yazmaktan çekinmeyin > Etiketler veya örneğimi demo kaynak kodundan indirin.

$ (document) .ready (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // değişkenleri // viewport.width / viewport.height olarak alın 

openme () $ (function () topbar.animate (left: "290px", süre: 300, sıra: false); pagebody.animate (left: "290px", süre: 300) , kuyruk: false););  function closeme () var closeme = $ (function () topbar.animate (left: "0px", süre: 180, sıra: false); pagebody.animate (left: "0px", süre: 180, sıra: yanlış);); 

// $ ("a.navlink") gezinti için sayfa içeriği yükleniyor canlı ("klik", işlev (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 

closeme (); $ (function () topbar.css ("top", "0px"); window.scrollTo (0, 1););

content.html (imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * geri arama yok * /), 1200);