Panduan Aplikasi Reka Bentuk Mudah Alih / Dev untuk jQuery Mobile

Selama 2-3 tahun yang lalu, kami telah melihat pertumbuhan yang besar dalam penyemak imbas dan sokongan OS untuk laman web mudah alih. Apatah lagi Apple iOS dan platform Google Android datang ke fikiran. Tetapi yang lain seperti PalmOS dan Blackberry masih dalam campuran. Sehingga baru-baru ini sangat sukar untuk menyesuaikan tema mudah alih tunggal ke semua platform ini.

JavaScript adalah permulaan, tetapi belum ada perpustakaan yang bersatu padu sekarang. jQuery Mobile mengambil semua ciri terbaik jQuery dan port mereka ke sumber web berasaskan mudah alih. Perpustakaan lebih seperti kerangka yang merangkumi animasi, kesan peralihan, dan gaya CSS automatik untuk elemen HTML asas. Dalam panduan ini, saya berharap dapat memperkenalkan platform dengan cara yang anda boleh berasa selesa merancang aplikasi mudah alih jQuery anda sendiri.

Ciri & Sokongan OS

Alasan saya mencadangkan pembelajaran jQuery Mobile lebih daripada kerangka lain adalah kesederhanaan. Kod ini dibina di atas teras jQuery dan mempunyai pasukan pemaju yang aktif menulis skrip dan menyunting pepijat. Daripada banyak ciri termasuk sokongan HTML5, pautan navigasi berkuasa Ajax, dan pengendali acara sentuh / sapu.

Sokongan berbeza-beza antara telefon dan dipecah menjadi carta 3 kategori dari A-C. A adalah tiang teratas yang mempunyai sokongan penuh jQuery Mobile, B mempunyai segala-galanya kecuali Ajax manakala C adalah HTML asas dengan sedikit JavaScript. Untungnya kebanyakan sistem operasi yang popular disokong sepenuhnya - Saya menambah senarai di bawah hanya beberapa contoh.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Jika anda ingin mengetahui lebih lanjut, cuba baca di halaman dokumen rasmi mereka. Ia tidak ditulis dalam sombong dan sebenarnya terasa sangat mudah untuk diikuti. Sekarang mari kita fokuskan pada asas-asas menulis halaman mudah alih jQuery dan bagaimana kita boleh membina aplikasi kecil!

Templat HTML Standard

Untuk mendapatkan aplikasi mudah alih pertama anda berfungsi, ada set template yang harus anda mulakan. Ini termasuk kod asas jQuery bersama dengan JS dan CSS mudah alih, semua luaran yang dihoskan dari CDN jQuery. Lihat kod contoh saya di bawah.

Satu-satunya unsur asing di sini harus menjadi dua meta tags. Bahagian atas viewport kemas kini pelayar mudah alih untuk menggunakan kesan zum penuh. Menetapkan nilai width = width device akan menetapkan lebar halaman tepat pada lebar skrin telefon. Dan yang terbaik dari semua itu tidak melumpuhkan ciri zum sejak jQuery Mobile boleh menyesuaikan diri dengan susunan peralihan.

Tag meta seterusnya X-UA-Serasi hanya memaksa Internet Explorer untuk menjadikan HTML dalam lelaran yang paling terkini. Pelayar yang lebih tua dan terutamanya mudah alih akan cuba untuk mendapatkan pepijat rendering yang tidak dikenali.

Membina Kandungan Tubuh

Kini ini adalah tempat mudah alih jQuery boleh menjadi rumit. Setiap halaman HTML tidak semestinya 1 halaman di laman web mudah alih. Rangka kerja ini menggunakan atribut data HTML5, yang boleh anda buat dengan sesuka hati dengan menambahkannya data- sebelum ini. Dalam cara yang sama peranan data = "halaman" boleh ditetapkan kepada pelbagai div dalam satu fail HTML, memberikan anda lebih daripada satu halaman.

Anda kemudian akan bergerak di antara halaman ini dengan pautan jangkau dan ID unik. Persediaan ini adalah idea yang baik untuk aplikasi asas dan mudah. Sekiranya anda hanya memerlukan 3-5 muka surat maka mengapa tidak menyimpan semuanya dalam satu fail? Kecuali anda mempunyai banyak kandungan bertulis, dalam hal ini cuba menggunakan PHP termasuk untuk menghemat waktu.

Semak contoh kod di bawah jika anda hilang.

 
 
 
Bar tajuk teratas
 
 
 
Tunjukkan halaman lain??
 
Petunjuk: klik butang di bawah!
 
Tentang kita
 
  
 
 
 
Page 2 Di sini
 
 
 
hanya beberapa kandungan tambahan juga.
 
Maksud saya, anda boleh pergi balik pada bila bila masa.
 
 
   

Lihatlah pautan utama dari halaman indeks seketika. Notis saya menambah sifat itu data-peranan = "butang" untuk menyiapkan pautan sebagai butang. Tetapi bukannya menggunakan gaya lalai yang kita sertakan data-tema = "c". Ini bertukar antara 1 dari 5 (tema a-e) template yang datang dibungkus secara lalai sebagai gaya CSS dalam jQ Mobile.

Butang saya juga merangkumi keseluruhan lebar halaman. Untuk menghapuskan tingkah laku yang perlu kita tetapkan elemen dari blok ke paparan inline. Atribut untuk melakukan ini adalah data-inline = "true" yang anda boleh masukkan ke mana-mana butang utama.

Bar Header dan Footer

Di sepanjang bahagian atas dan bawah aplikasi anda, anda harus menambah kandungan pengepala dan kaki. Gaya reka bentuk ini sering dikaitkan dengan aplikasi iOS yang pertama kali menjadi popular menggunakan App Store mudah alih Apple. jQ Mobile menggunakan atribut peranan data untuk menentukan header, footer, dan kandungan halaman. Mari kita lihat secara ringkas di kawasan ini.

Butang Bar Teratas

Secara lalai bar atas menyokong satu set dua (2) pautan dalam cara yang sama dengan aplikasi mudah alih yang lain. lalai iOS untuk menggunakan “belakang” butang ke kiri dan seringkali “pilihan” atau “config” di sebelah kanan.

 
 Tetapan 
Page 2 Di sini
 
 

Kod di atas hanya memberi tumpuan kepada kontena div untuk halaman Perihal kami bersama-sama dengan kandungan header. Atribut HTML tambahan data-add-back-btn = "true" hanya akan berfungsi apabila ditambah ke peranan data halaman. Tujuannya ialah secara automatik memasukkan butang belakang yang berfungsi sama dengan butang belakang penyemak imbas anda.

Kita boleh menambah butang belakang secara manual dengan kod yang sama seperti yang kita gunakan di kawasan kandungan. Tetapi saya rasa ini memerlukan lebih lama untuk persediaan terutama pada beberapa halaman. Semua pautan utama dalam bahagian pengepala akan lalai ke kedudukan butang kiri / kanan. Dengan menggunakan kelas = "ui-btn-betul" ini semula butang Tetapan saya supaya terdapat ruang kosong untuk butang belakang. Saya juga menggunakan gaya tema sekunder untuk memberi sedikit kelebihan!

Navigasi Footer

Kawasan footer banyak yang tidak merasa sangat berguna pada mulanya. Ia adalah tempat di mana anda boleh menyimpan barangan hak cipta dan pautan yang lebih penting, tetapi ini boleh ditambah dengan mudah di bahagian bawah kawasan kandungan anda. Jadi apa gunanya menggunakan footer?

Contoh yang terbaik yang saya lihat menggunakan ruang kaki sebagai sistem navigasi di mana pautan tab kelihatan mengawal navigasi halaman. Terdapat banyak pilihan di mana anda boleh memilih kesan skrin penuh, menambah ikon, menyesuaikan penempatan, dan beberapa atribut lain juga. Tapi mari kita bina nav footer yang mudah dengan 3 butang untuk mendapatkan gambaran bagaimana ini berfungsi.

• Pratonton Demo Langsung

Jadi, terdapat beberapa kod footer untuk seksyen halaman. peranan data = "navbar" harus ditambah ke elemen kontena perumahan senarai tanpa urutan dan BUKAN elemen UL itu sendiri. Setiap pautan dalam senarai dianggap sebagai tab bar, yang kemudiannya dibahagikan secara sama rata berdasarkan jumlah pautan. Kelas tambahan ui-body-b hanya menambah kesan estetik ketika kita beralih antara beberapa gaya yang ada.

Jika anda melihat pada butang pertama saya mempunyai atribut data arah = "terbalik". Walaupun saya boleh menggunakan persediaan butang belakang seperti dahulu untuk kembali ke laman utama, saya sebaliknya menggunakan ID halaman #index. Secara lalai tetingkap apl akan beralih ke kanan yang kelihatan agak tidak menyenangkan kerana anda mengharapkan animasi bergerak ke belakang. Anda boleh bermain-main dengan lebih banyak kesan animasi ini jika anda mempunyai masa. Lihat halaman maklumat peralihan dalam dokumentasi jQuery.

Ajax & Halaman Dinamik

Segmen pertama benar-benar membuka mata utama untuk membina aplikasi mudah alih dengan jQuery. Tetapi saya mahu memulakan aplikasi baru yang memuatkan data dari halaman luaran. Saya akan menggunakan skrip PHP yang sangat mudah untuk mencapai $ _REQUEST [] pemboleh ubah dan paparan Dribbble yang kecil. Screenshow di bawah ini harus memberi anda idea apa yang akan kita bina.

Mula-mula saya akan membuat halaman index.html yang ditetapkan pada templat lalai. Untuk skrin utama ini, saya menggunakan persediaan pandangan senarai untuk memaparkan setiap pautan demi pesanan. Ini dilakukan di kawasan kandungan dengan a data-role = "listview" atribut pada senarai kontena. Memotong barangan pengepala yang sama seperti dahulu, saya menambah semua kod saya dari halaman indeks baru ini di bawah.

 
 
 
Oktober 2011 Shots
 
 
 
 
Imej pertama
 
Imej kedua
 
Imej Ketiga
 
Imej keempat
 
 
  
   

Setiap pautan anchor dalam paparan senarai saya ke fail yang sama - index.php. Tetapi kita lulus dalam parameter imgid sebagai pemboleh ubah permintaan. Pada fail image.php kita mengambil ID dan mengujinya dengan 4 nilai pratetap. Jika mana-mana perlawanan sehingga kami menggunakan URL dan tajuk imej yang sepadan, jika tidak, kami hanya memaparkan pukulan Dribbble lalai.

Skrip Loader Imej

Skrip image.php masih mempunyai template mudah alih jQuery lalai yang dimasukkan ke dalam kod. Ia sebenarnya berkongsi header dan footer yang hampir sama, kecuali penambahan atribut pautan belakang kami data-add-back-btn = "true". Perhatikan butang ini hanya akan muncul jika kita datang dari index.html terlebih dahulu! Cuba terus memuat image.php dan tiada apa yang akan muncul kerana tidak ada “belakang” untuk berpindah ke.

Saya fikir kita boleh membuat kod kod lebih sedikit dengan mengkaji logik PHP saya terlebih dahulu. Kami menggunakan a suis / kes kaedah untuk memeriksa terhadap 4 ID yang berlainan dan memberikan tajuk tajuk, URL imej, dan sumber asal artis asal.

Semua kelihatan agak mudah - walaupun PHP dev pemula harus dapat mengikutinya! Dan jika anda tidak faham ia tidak penting kepada kod jQuery, jadi jangan risau. Kita perlu beralih sekarang dan lihat templat yang saya bina dalam halaman baru ini. Semua kod HTML ditambah selepas blok PHP keseluruhan di atas. Saya menggunakan ID “imej” untuk bekas dan juga persediaan header untuk berubah dengan setiap foto baru.

 
 
 
 
 
 Lihat Asal
 
 
  
 

Anda mungkin dapat melihat bagaimana ringkas demo ini. Tetapi tujuannya adalah untuk menunjukkan skalabilitas mudah alih jQuery. PHP dengan mudah boleh ditambah ke dalam campuran dan anda boleh mengeluarkan beberapa aplikasi benar-benar kemas dengan hanya beberapa jam pembangunan.

Reka Bentuk Fancy dengan Thumbnail Senarai

Satu kesan tambahan terakhir yang kami boleh laksanakan ialah penggunaan imej kecil untuk memeriahkan halaman penyenaraian. Saya juga akan memecah teks ke dalam kotak tajuk dan tajuk untuk memaparkan kedua-dua tajuk karya seni dan nama artis.

Untuk memulakan membuka Photoshop dan membuat dokumen 80 × 80 px. Saya akan dengan cepat mengecil semula setiap imej dan menyimpan imej kecil agar sesuai dengannya. Kemudian mengemaskini senarai paparan senarai kita perlu memasukkan beberapa unsur lagi.

Lihat kod di bawah dan contoh demo saya untuk melihat apa yang saya maksudkan.

[Preview Live Demo]

 
 
  
Tugas Wunderkit
 
oleh Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
oleh Scott Hill
 
  
Aplikasi Forum untuk Facebook
 
oleh Ionut Zamfir
 
  
Twitter
 
oleh Sam Jones
 
 
 

Kelas untuk ui-li-heading dan ui-li-desc ditambah secara lalai ke dalam jQuery Mobile stylesheet. Ini sama dengan kelas imej ui-li-thumb yang secara automatik semula saiz setiap bar paparan senarai mengikut ketinggian imej. Kini dari sini anda boleh membina lebih banyak di bahagian depan dengan animasi, kesan halaman, gaya gaya, dan sebagainya.

Atau secara alternatif anda boleh mula membina sistem backend untuk memuat naik imej baru dan memotong imej kecil secara automatik untuk disertakan dalam senarai. Terdapat banyak kelonggaran dengan jQuery Mobile anda hampir tidak dapat melabelnya semata-mata sebagai perpustakaan JavaScript. Ini lebih daripada keseluruhan rangka HTML5 / CSS / jQuery untuk membina apl mudah alih yang pantas dan berskala.

Kesimpulannya

Sebagai penulisan artikel ini, jQuery Mobile Team secara rasmi mengeluarkan RC1.0 dari perpustakaan kod. Ini bermakna kebanyakan jika tidak semua pembaikan pepijat utama telah dikosongkan dan kini penguji sedang menyiapkan untuk pembebasan penuh. Kerana ini, anda tidak akan menemui banyak maklumat di web.

Tetapi sebagai pembangun web awal bulan pasti akan mengambil trend. Aplikasi mudah alih dan juga susunatur web mudah alih semakin popular dengan peningkatan besar dalam telefon pintar. Pemaju web tidak mempunyai masa untuk mempelajari bahasa pengaturcaraan penuh untuk membina aplikasi Android / iOS. Jadi jQuery Mobile adalah alternatif yang nipis yang termasuk sokongan untuk majoriti perisian industri mudah alih, dan terus berkembang setiap hari dengan komuniti pemaju aktif.