Navigasi Reka Bentuk Aplikasi Mudah Alih / Dev dengan jQuery

Telefon pintar kini dilengkapi dengan beberapa pelayar web yang sangat cekap. JavaScript lebih berkuasa daripada sebelumnya, dan boleh dilanjutkan dengan bantuan perpustakaan kod seperti jQuery. Apabila anda menambah spesifikasi HTML5 / CSS3 terkini, ada kemungkinan untuk membina aplikasi web mudah alih yang sangat mudah dengan beberapa kod frontend asas.

Dalam tutorial ini, saya akan menunjukkan bagaimana anda boleh membina laman web / webapp berasaskan mudah alih. Kami akan menggunakan pertanyaan media CSS3 untuk menyasarkan peranti tertentu dan resolusi skrin. Plus sedikit jQuery membantu menghidupkan menu dan memuatkan kandungan halaman luaran menggunakan panggilan Ajax. Lebih baik lagi, susun atur juga boleh berkembang untuk dipaparkan dengan betul dalam pelayar desktop biasa seperti Chrome atau Firefox.

• Demo Langsung
• Kod sumber

Menentukan Struktur Halaman

Mari mulakan dengan melayari halaman HTML dahulu dan gaya menggunakan beberapa peraturan CSS. Saya akan melangkau kebanyakan tag meta yang luar biasa di tajuk kerana mereka tidak menjejaskan aplikasi web secara langsung. Bagaimanapun, ada beberapa yang perlu saya sebutkan, iaitu dari coretan berikut:

X-UA-Serasi digunakan untuk menggambarkan bagaimana dokumen anda akan dipaparkan dalam penyemak imbas tertentu. Ini satu senario yang menarik apabila pengekodan dalam HTML5, jadi saya tidak akan risau tentang perkara ini. Bagaimanapun meta itu viewport tag sangat penting. Ia menetapkan tetingkap penyemak imbas mudah alih kepada 100% dan bukannya kesan berzum standard.

Ia juga mungkin untuk melumpuhkan zum pengguna dengan nilai kandungan user-scalable = no. Tetapi dalam kes ini kita hanya mahu menetapkan lebar skrin penuh untuk sama dengan lebar peranti kami. Tag aplikasi web Apple akan membolehkan laman web disimpan sebagai ikon skrin utama ke iPhone atau iPod Touch anda. Tidak benar-benar diperlukan tetapi sudah tentu bernilai.

Kandungan Tubuh Dalam

Di dalam tag tubuh saya telah menyiapkan pembalut div dengan ID #w. Di dalamnya saya telah memecahkan susun atur menjadi dua lagi divs menggunakan ID #pagebody dan #navmenu. Lebar keseluruhan halaman adalah terhad kepada 640px dengan pilihan supaya skala susun atur kepada nombor yang ketat.

 
  
HK Mobile
 
 
 
Selamat datang ke Laman Mudah Alih!
 
 
 
 
 
Pautan Menu
 
 
 
Rumah
 
Tentang kita
 
Iklankan
 
Tulis untuk Kami
 
Kenalan
 
Dasar Privasi
 
 
 

Menu navigasi diberi nilai z-indeks yang lebih rendah supaya itu #pagebody sentiasa di atas. Ini adalah penting kerana kod JavaScript akan meluncur ke atas badan halaman beberapa piksel tertentu untuk mendedahkan navigasi di bawahnya.

Saya telah menggunakan simbol hash (#) di hadapan setiap halaman .html untuk menghentikan beberapa kelakuan miskin di Mobile Safari. Setiap kali anda akan mengklik pautan bar URL muncul dan menolak kandungan. Tetapi apabila merujuk kepada ID tiada apa yang dimuat semula kecuali melalui panggilan JavaScript.

Kedudukan CSS

Tidak banyak kandungan yang mengelirukan dalam kod CSS kami. Kebanyakan kedudukan dilakukan secara manual dan kemudian dimanipulasi melalui jQuery. Tetapi terdapat beberapa bahagian menarik dalam dokumen kami.

/ ** @ kumpulan teras badan ** / #w #pagebody posisi: relatif; kiri: 0; max-width: 640px; min lebar: 320px; z-index: 99999;  #w #navmenu latar belakang: # 475566; ketinggian: 100%; paparan: blok; kedudukan: tetap; lebar: 300px; kiri: 0px; atas: 0px; z-index: 0; 

Segmen utama ini mentakrifkan gaya untuk kedua-dua bahagian halaman. Menu navigasi kami hanya 300px lebar, jadi ini meninggalkan sedikit ruang untuk kandungan halaman yang masih dapat dilihat. Butang menu buka / tutup juga terletak terus di sebelah kiri dan sentiasa boleh diakses. Sekeping penting di sini ialah nilai harta z-indeks dan menggunakan kedudukan: tetap; di navmenu kami.

Pengatas bar alat atas juga merupakan bahagian yang menarik. Ini ditetapkan ke kedudukan tetap supaya ia akan tatal dengan kandungan halaman. Ini mereplikasi kesan yang sama seperti yang anda dapati di mana-mana bar tajuk apl iOS.

/ ** @group header ** / #w #pagebody header # toolbarnav display: block; kedudukan: tetap; kiri: 0px; atas: 0px; z-index: 9999; latar belakang: # 0b1851 url ('img / tabbar-solid-bg.png') kiri atas no-repeat; jejari sempadan: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; jejari bawah-kanan-jejari: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; jejari bawah-kiri-kiri: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; ketinggian: 44px; lebar: 100%; max-width: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; padding-top: 10px; padding-right: 40px; warna: # e6e8f2; font-weight: bold; saiz fon: 2.1em; teks-bayangan: 1px 1px 0px # 313131; 

Peraturan Bergerak

Sangat mudah untuk melihat saya juga menggunakan imej latar belakang untuk tekstur bar header biru. Ini bersaiz 640 × 44 piksel untuk menjaga struktur susun atur yang konsisten. Tetapi saya juga telah membangunkan imej @ 2x untuk paparan retina iPhone / iPad. Anda boleh melihat kedua-dua imej di bawah, atau ambil mereka dari kod sumber demo saya.

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

Saya menyediakan CSS mudah alih untuk fungsi ini dalam fail lain yang dinamakan responsive.css. Ia mengandungi dua pertanyaan media yang menggantikan bar tajuk bg dan ikon butang menu untuk peranti retina.

/ ** retina display ** / @media screen only dan (-webkit-min-device-pixel-ratio: 2), hanya skrin dan (min - moz-device-pixel-ratio: 1.5) min-device-pixel-ratio: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') left left no-repeat; saiz latar belakang: 640px 44px;  #w #pagebody header # menu-btn background: url ('img/[email protected] ') no-repeat; saiz latar belakang: 53px 30px; 

Merancang Menu Arrows

Di kawasan navigasi saya juga menyertakan ikon anak panah kecil ke sebelah kanan setiap pautan menu. Ini mudah digantikan dengan imej dari mana-mana karya kreatif kreatif. Tetapi kebanyakan kebanyakan peminat CSS3 akan suka menguji kaedah ini.

#w #navmenu ul li a :: after content: "; display: block; width: 6px; height: 6px; border-right: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; position: absolute; : 30px; atas: 45%; -webkit -transform: berputar (45deg); -moz-transform: berputar (45deg); -o-transform: berputar (45deg); ul li a: hover :: after border-color: # cad0e6;

Kami menggunakan ubah harta untuk membuat sempadan kecil selepas kandungan. Saya juga persediaan kedudukan: mutlak; jadi kami boleh menggerakkan sempadan ini secara meluas dalam item pautan dalaman. Sangat mudah untuk menukar warna sempadan pada keadaan hover, yang menawarkan perasaan yang lebih dinamik. Ia cukup luar biasa yang boleh anda lakukan hanya dengan menggunakan peraturan asas HTML5 dan CSS3.

Tetapi sekarang mari kita berpindah ke bit dan potongan kod JavaScript. Ingat ini memerlukan termasuk ke pustaka jQuery untuk kod saya berjalan dengan betul.

animasi jQuery

Dalam menulis kod tersuai ini, saya telah mencipta satu dokumen baru bernama script.js. Jangan ragu untuk menulis ini secara langsung > tag, atau muat turun contoh saya dari kod sumber demo.

$ (document) .ready (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // retrieve variables as // viewport.width / viewport.height 

fungsi openme () $ (function () topbar.animate (left: "290px", duration: 300, queue: false); pagebody.animate (left: "290px" , giliran: false););  function closeme () var closeme = $ (function () topbar.animate (left: "0px", duration: 180, queue: false); pagebody.animate (left: "0px" duration: 180, queue: false);); 

// memuat kandungan halaman untuk navigasi $ ("a.navlink"). hidup ("klik", fungsi (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 

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

content.html (imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * no callback * /), 1200);