Desain Aplikasi Seluler / Navigasi Pembuatan Bangunan dengan jQuery

Smartphone sekarang dilengkapi dengan beberapa browser web yang sangat efisien. JavaScript lebih kuat dari sebelumnya, dan dapat diperluas dengan bantuan pustaka kode seperti jQuery. Saat Anda menambahkan spesifikasi HTML5 / CSS3 terbaru, dimungkinkan untuk membuat aplikasi web seluler yang sangat cepat dengan beberapa kode frontend dasar.

Dalam tutorial ini saya akan menunjukkan bagaimana Anda dapat membangun situs web / webapp berbasis seluler. Kami akan menggunakan kueri media CSS3 untuk menargetkan perangkat tertentu dan resolusi layar. Ditambah sedikit jQuery membantu menghidupkan menu dan memuat konten halaman eksternal menggunakan panggilan Ajax. Bahkan lebih baik, tata letak bahkan dapat diperluas untuk ditampilkan dengan benar di browser desktop biasa seperti Chrome atau Firefox.

• Demo Langsung
• Kode sumber

Menentukan Struktur Halaman

Mari kita mulai dengan membuka halaman HTML terlebih dahulu dan menatanya menggunakan beberapa aturan CSS. Saya akan melewati sebagian besar tag meta yang tidak biasa di header karena tidak memengaruhi aplikasi web secara langsung. Namun ada beberapa yang harus saya sebutkan, yaitu dari cuplikan di bawah ini:

Kompatibel dengan X-UA digunakan untuk menggambarkan bagaimana dokumen Anda harus di-render di browser tertentu. Ini adalah skenario yang menarik ketika melakukan pengkodean dalam HTML5, jadi saya tidak akan terlalu khawatir tentang hal ini. Namun meta viewport tag sangat penting. Ini mengatur jendela peramban seluler menjadi 100% alih-alih efek diperbesar standar.

Dimungkinkan juga untuk menonaktifkan zoom pengguna dengan nilai konten user-scalable = no. Namun dalam hal ini kami hanya ingin mengatur lebar layar penuh agar sama dengan lebar perangkat kami. Tag aplikasi web Apple akan memungkinkan situs web untuk disimpan sebagai ikon layar beranda ke iPhone atau iPod Touch Anda. Tidak sepenuhnya diperlukan tetapi tentu saja berharga untuk dimiliki.

Konten Tubuh Bagian Dalam

Di dalam tag tubuh saya telah menyiapkan div pembungkus dengan ID #w. Di dalamnya saya telah memecah tata letak menjadi dua div lagi menggunakan ID # orang dan #navmenu. Lebar seluruh halaman dibatasi hingga 640px karena pilihan sehingga tata letak skala ke angka yang ketat.

 
  
HK Mobile
 
 
 
Selamat datang di Situs Mobile!
 
 
 
 
 
Tautan Menu
 
 
 
Rumah
 
Tentang kami
 
Mengiklankan
 
Menulis untuk Kami
 
Kontak
 
Rahasia pribadi
 
 
 

Menu navigasi diberi nilai z-index yang lebih rendah sehingga # orang selalu di atas. Ini penting karena kode JavaScript akan meluncur di atas badan halaman sejumlah piksel untuk mengungkapkan navigasi di bawahnya.

Saya telah menggunakan simbol hash (#) di depan setiap halaman .html untuk menghentikan beberapa perilaku buruk di Mobile Safari. Setiap kali Anda mengklik tautan, bilah URL muncul dan menekan konten. Tetapi ketika referensi ID tidak ada yang dimuat kembali kecuali melalui panggilan JavaScript.

Penentuan Posisi CSS

Tidak ada banyak konten membingungkan di dalam kode CSS kami. Sebagian besar penentuan posisi dilakukan secara manual dan kemudian dimanipulasi melalui jQuery. Tetapi ada beberapa hal menarik dalam dokumen kami.

/ ** @group core body ** / #w #pagebody position: relative; kiri: 0; lebar maks: 640px; lebar minimum: 320px; z-index: 99999;  #w #navmenu background: # 475566; tinggi: 100%; display: blok; posisi: tetap; lebar: 300px; kiri: 0px; atas: 0px; z-index: 0; 

Segmen teratas ini mendefinisikan gaya untuk kedua bagian halaman. Menu nav kami hanya selebar 300px, jadi ini menyisakan sedikit ruang agar konten halaman tetap terlihat. Tombol menu buka / tutup juga terletak langsung di sisi kiri dan selalu dapat diakses. Bagian penting di sini adalah nilai properti z-index dan penggunaannya posisi: tetap; di navmenu kami.

Header bilah alat atas juga merupakan bagian yang menarik. Ini diatur ke posisi tetap sehingga akan menggulir dengan konten halaman. Ini mereplikasi efek yang sama seperti yang Anda temukan di bilah judul aplikasi iOS apa pun.

/ ** @group header ** / #w #pagebody header # toolbarnav display: block; posisi: tetap; kiri: 0px; atas: 0px; z-index: 9999; latar belakang: # 0b1851 url ('img / tabbar-solid-bg.png') di kiri atas tidak ada pengulangan; batas-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; batas-bawah-kanan-jari-jari: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; batas-bawah-kiri-jari-jari: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; tinggi: 44px; lebar: 100%; lebar maks: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; padding-top: 10px; padding-right: 40px; warna: # e6e8f2; font-weight: bold; ukuran font: 2.1em; text-shadow: 1px 1px 0px # 313131; 

Aturan Seluler

Sangat mudah untuk memperhatikan saya juga menggunakan gambar latar belakang untuk tekstur header bar biru. Ini berukuran 640 × 44 piksel agar sesuai dengan struktur tata letak yang konsisten. Tapi saya juga mengembangkan gambar @ 2x untuk tampilan retina iPhone / iPad. Anda dapat melihat kedua gambar di bawah ini, atau mengambilnya dari kode sumber demo saya.

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

Saya mengatur CSS seluler untuk fungsi ini di file lain bernama responsif.css. Ini berisi dua permintaan media yang menggantikan bilah judul bg dan ikon tombol menu untuk perangkat retina.

/ ** tampilan retina ** / @media hanya layar dan (-webkit-min-device-pixel-ratio: 2), hanya layar dan (min - moz-device-pixel-rasio: 1,5), hanya layar dan ( min-device-pixel-ratio: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') kiri atas tidak perlu diulang; ukuran latar belakang: 640px 44px;  #w #pagebody header # menu-btn background: url ('img/[email protected] ') jangan-ulangi; ukuran latar belakang: 53px 30px; 

Merancang Panah Menu

Di area navigasi saya juga menyertakan ikon panah kecil di sebelah kanan setiap tautan menu. Ini dapat dengan mudah diganti dengan gambar dari karya seni commons kreatif. Tetapi sebagian besar semua penggemar CSS3 akan senang menguji metode ini.

#w #navmenu ul li a :: after content: "; display: blok; lebar: 6px; tinggi: 6px; batas-kanan: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; posisi: absolut; kanan : 30px; atas: 45%; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -o-transform: rotate (45deg); transform: rotate (45deg); #w #navmenu ul a: hover :: after border-color: # cad0e6;

Kami menggunakan mengubah properti untuk membuat perbatasan kecil setelah konten. Saya juga mengatur posisi: absolut; sehingga kami dapat dengan bebas memindahkan batas ini di sekitar item tautan dalam. Sangat mudah untuk mengubah warna tepi pada kondisi melayang, yang menawarkan perasaan yang lebih dinamis. Cukup luar biasa apa yang dapat Anda capai hanya dengan menggunakan aturan dasar HTML5 dan CSS3.

Tapi sekarang mari kita beralih ke potongan-potongan kode JavaScript. Ingat ini membutuhkan penyertaan ke perpustakaan jQuery agar kode saya dapat berjalan dengan baik.

jQuery Animated

Dalam menulis kode khusus ini saya telah membuat dokumen baru bernama script.js. Jangan ragu untuk menulis ini secara langsung di > tag, atau unduh contoh saya dari kode sumber demo.

$ (dokumen) .ready (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window) .width (), tinggi: $ (window) .height (); // mengambil variabel sebagai // viewport.width / viewport.height 

function openme () $ (function () topbar.animate (kiri: "290px", durasi: 300, antrian: false); pagebody.animate (kiri: "290px", durasi: 300 , antrian: false););  function closeme () var closeme = $ (function () topbar.animate (kiri: "0px", durasi: 180, antrian: false); pagebody.animate (kiri: "0px", durasi: 180, antrian: false);); 

// memuat konten halaman untuk navigasi $ ("a.navlink"). live ("klik", fungsi (e) e.preventDefault (); var linkurl = $ (ini) .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 () / * no callback * /), 1200);