Buat laman web mudah alih dengan jQuery Mobile

Kandungan

• Cara membuat kod beberapa halaman dalam satu fail HTML
• Penerangan
• Cara menggunakan kotak dialog dan peralihan
• Peralihan yang boleh digunakan
• Penerangan
• Cara membuat butang
• Penerangan
• Cara membuat bar navigasi
• Cara kod HTML untuk bar navigasi:
• Cara memformat kandungan dengan jQuery Mobile
• Gaya lalai yang digunakan oleh jQuery Mobile
• Penerangan
• Cara menerapkan tema pada elemen HTML
• Dua cara untuk menerapkan tema:
• Penerangan
• Perspektif

Ini adalah petikan yang diedit dari Bab 15 dari HTML5 dan CSS3 Murach oleh Zak Ruvalcaba dan Anne Boehm.

jQuery Mobile adalah pustaka JavaScript percuma, sumber terbuka, lintas platform, yang boleh anda gunakan untuk membangunkan laman web mudah alih. Perpustakaan ini membolehkan anda membuat halaman yang kelihatan dan terasa seperti halaman aplikasi mudah alih asli.

Walaupun jQuery Mobile kini tersedia sebagai versi ujian beta, versi ini sudah menyediakan semua ciri yang anda perlukan untuk mengembangkan laman web mudah alih yang sangat baik. Hasilnya, anda boleh mula menggunakannya dengan segera. Anda juga boleh mengharapkan versi ini terus dipertingkatkan, jadi jQuery Mobile hanya akan menjadi lebih baik.

Dalam artikel ini, anda akan mempelajari teknik asas untuk membuat halaman laman web mudah alih. Itu termasuk penggunaan kotak dialog, butang, dan bar navigasi.

Cara membuat kod beberapa halaman dalam satu fail HTML

Berbeza dengan cara anda mengembangkan halaman web untuk laman web layar, jQuery Mobile memungkinkan anda membuat beberapa halaman dalam satu fail HTML. Ini digambarkan oleh rajah 15-7. Di sini, anda dapat melihat dua halaman laman web beserta HTML untuk halaman ini. Yang mengejutkan ialah kedua-dua halaman dikodkan dalam satu fail HTML.

Untuk setiap halaman, anda kod elemen satu div dengan "halaman" sebagai nilai atribut data-role. Kemudian, di dalam setiap elemen div tersebut, anda kodkan elemen div untuk tajuk, kandungan dan footer setiap halaman. Kemudian, apabila fail HTML dimuat, halaman pertama di badan fail dipaparkan.

Untuk menghubungkan antara halaman dalam file HTML, anda menggunakan placeholder seperti yang ditunjukkan pada gambar 7-11 dari bab 7. Sebagai contoh, elemen a> di halaman pertama dalam contoh ini pergi ke "#toobin" ketika pengguna mengetuk h2 atau elemen img yang dikodkan sebagai kandungan untuk pautan ini. Ini merujuk pada elemen div dengan "toobin" sebagai atribut idnya, yang bermaksud bahawa mengetuk pautan membawa pembaca ke halaman kedua dalam file.

Walaupun contoh ini menunjukkan hanya dua halaman, anda boleh membuat kod banyak halaman dalam satu fail HTML. Namun, ingatlah bahawa semua halaman beserta gambar, JavaScript, dan fail CSS dimuat dengan satu fail HTML. Akibatnya, masa muat akan menjadi berlebihan jika anda menyimpan terlalu banyak halaman dalam satu fail. Apabila itu berlaku, anda boleh membahagikan halaman anda ke lebih dari satu fail HTML.

HTML untuk dua halaman dalam badan satu fail HTML:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> bahagian data-role = "content"> h3> Pembesar suara 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 Oktober 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - ELEMEN-ELEMEN UNTUK PERINGKAT PEMBICARA -> / bahagian> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> Dewan Bandaraya SJV / h1> / header> bahagian data-role = "content"> h3> The Supreme Nine: br> Rahsia Berjubah Hitam / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Pengarang buku terlaris yang terkenal, i> The Nine:! - COPY CONTINUES -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Penerangan

• Apabila anda menggunakan jQuery Mobile, anda tidak perlu membuat fail HTML yang berasingan untuk setiap halaman. Sebagai gantinya, di dalam elemen badan dari satu fail HTML, anda mengkod satu elemen div untuk setiap halaman dengan atribut peranan data ditetapkan ke "halaman".
• Untuk setiap elemen div, anda menetapkan atribut id ke nilai placeholder yang dapat diakses oleh atribut href dalam> elemen halaman lain.

Cara menggunakan kotak dialog dan peralihan

Gambar 15-8 menunjukkan cara membuat kotak dialog yang terbuka apabila pautan diketuk. Untuk melakukan itu, anda kodkan kotak dialog seperti yang anda lakukan di halaman mana pun. Tetapi dalam elemen> yang masuk ke halaman itu, anda kodkan atribut rel-data dengan “diagnost” sebagai nilainya.

Seperti contoh dalam gambar ini, fail CSS jQuery Mobile memformat kotak dialog yang berbeza daripada laman web biasa. Secara lalai, kotak dialog akan mempunyai latar belakang gelap dengan teks latar depan putih, dan tajuk dan footer tidak akan merangkumi lebar halaman. Kotak dialog juga akan mempunyai "X" di tajuk yang mesti diketuk oleh pengguna untuk kembali ke halaman sebelumnya.

Apabila anda membuat kod elemen> yang masuk ke halaman atau kotak dialog lain, anda juga dapat menggunakan atribut peralihan data untuk menentukan salah satu dari enam peralihan yang diringkaskan dalam tabel dalam gambar ini. Setiap peralihan ini bertujuan untuk meniru kesan yang digunakan oleh peranti mudah alih seperti iPhone.

Peralihan yang boleh digunakan

HTML yang membuka halaman sebagai kotak dialog dengan peralihan "pop":

a href = "# toobin" data-rel = "dialog" data-peralihan = "pop">

HTML yang membuka halaman dengan peralihan "pudar":

a href = "# toobin" peralihan data = "pudar">

Penerangan

• HTML untuk a kotak dialog dikodkan dengan cara mana-mana halaman dikodkan. Namun, elemen> yang menghubungkan ke halaman termasuk atribut rel data dengan "dialog" sebagai nilainya. Untuk menutup kotak dialog, pengguna mengetuk X di tajuk kotak.
• Untuk menentukan cara halaman atau kotak dialog dibuka, Anda dapat menggunakan atribut peralihan data dengan salah satu nilai dalam tabel di atas. Sekiranya peranti tidak menyokong peralihan yang anda tentukan, atribut akan diabaikan.
• Gaya untuk kotak dialog dilakukan oleh fail CSS jQuery Mobile.

Cara membuat butang

Gambar 15-9 menunjukkan cara menggunakan butang untuk menavigasi dari satu halaman ke halaman lain. Untuk melakukannya, anda hanya menetapkan atribut role-data untuk elemen> ke "butang", dan jQuery Mobile melakukan selebihnya.
Walau bagaimanapun, anda juga boleh menetapkan beberapa atribut lain untuk butang. Jika, misalnya, anda ingin dua atau lebih butang muncul berdampingan, seperti dua butang pertama dalam gambar ini, anda dapat menetapkan atribut data-inline ke "true".

Sekiranya anda ingin menambahkan salah satu daripada 18 ikon yang disediakan oleh jQuery Mobile ke butang, anda juga kodkan atribut data-icon. Sebagai contoh, butang ketiga dalam contoh ini menggunakan ikon "hapus", dan butang keempat menggunakan ikon "rumah". Semua ikon ini kelihatan seperti ikon yang mungkin anda lihat dalam aplikasi mudah alih asli. Secara kebetulan, ikon ini bukan fail terpisah yang mesti diakses oleh halaman. Sebaliknya, mereka disediakan oleh perpustakaan jQuery Mobile.

Sekiranya anda ingin mengelompokkan dua atau lebih butang secara mendatar, seperti butang Ya, Tidak, dan Mungkin dalam angka ini, anda boleh mengekodkan elemen> untuk butang dalam elemen div yang mempunyai "kumpulan kawalan" sebagai atribut peranan data dan "Mendatar" sebagai atribut jenis data. Atau, untuk mengelompokkan butang secara menegak, anda boleh mengubah atribut jenis data menjadi "menegak".

Sekiranya anda menetapkan atribut data-rel untuk butang ke "kembali" dan atribut href ke simbol pound (#), butang akan kembali ke halaman yang memanggilnya. Dengan kata lain, butang berfungsi seperti butang Kembali. Ini digambarkan oleh butang terakhir dalam kandungan halaman.

Dua butang terakhir menunjukkan bagaimana butang muncul di bahagian bawah halaman. Di sini, ikon dan teks berwarna putih dengan latar belakang hitam. Dalam kes ini, atribut class untuk footer diatur ke "ui-bar", yang memberitahu jQuery Mobile bahawa ia harus meletakkan sedikit lebih banyak ruang di sekitar isi footer. Anda akan mengetahui lebih lanjut mengenai perkara itu dalam rajah 15-12.

HTML untuk butang di bahagian:

! - Untuk butang sebaris, tetapkan atribut baris data ke true -> a href = "#" data-role = "button" data-inline = "true"> Batal / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Untuk menambahkan ikon ke butang, gunakan atribut data-icon -> a href = "#" data-role = "butang "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Untuk butang kumpulan, gunakan elemen div dengan atribut yang mengikuti -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Ya / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Tidak / a> a href = "#" data-role = "butang"> Mungkin / a> / div>! - untuk kodkan butang Kembali, tetapkan atribut data-rel ke belakang -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Kembali ke halaman sebelumnya / a >

HTML untuk butang di bahagian bawah:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Tambahkan ke Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet Halaman ini / a> / footer>

Penerangan

• Untuk menambahkan butang ke halaman web, Anda membuat kod elemen> dengan atribut peranan data yang ditetapkan ke "butang".

Cara membuat bar navigasi

Gambar 15-10 menunjukkan bagaimana anda boleh menambahkan bar navigasi ke laman web. Untuk melakukan itu, anda kod elemen div dengan peranan datanya ditetapkan ke "navbar". Di dalam elemen ini, anda kodkan elemen ul yang mengandungi unsur li yang mengandungi elemen> untuk item di bar navigasi. Namun, perhatikan bahawa anda tidak membuat kod atribut data-role untuk elemen>.

Untuk menukar warna untuk item di bar navigasi, kod dalam contoh ini merangkumi atribut data-tema-b untuk setiap item. Hasilnya, jQuery Mobile mengubah warna latar belakang setiap item dari hitam, yang merupakan lalai, menjadi biru yang menarik. Di samping itu, kod ini menetapkan atribut class untuk butang aktif menjadi "ui-btn-active" sehingga jQuery Mobile mengubah warna untuk butang aktif menjadi biru lebih terang. Ini menunjukkan bagaimana anda boleh mengubah pemformatan yang digunakan oleh jQuery Mobile, dan anda akan mengetahui lebih lanjut mengenai itu seterusnya.

HTML untuk bar navigasi:

header data-role = "header"> h1> Dewan Bandaraya SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-tema = "b "> Rumah / a> / li> li> a href =" # speaker "data-icon =" star "data-tema =" b "> Pembesar suara / a> / li> li> a href =" # data contactus- ikon = "grid" data-tema = "b"> Hubungi Kami / a> / li> / ul> / div> / header>

Cara kod HTML untuk bar navigasi:

• Kod elemen div dalam elemen tajuk. Kemudian, tetapkan atribut role-data untuk elemen div ke "navbar".
• Di dalam elemen div, kodkan elemen ul yang mengandungi satu unsur li untuk setiap pautan.
• Di dalam setiap elemen li, kodkan elemen> dengan atribut href yang menggunakan placeholder untuk halaman yang harus dilampirkan oleh pautan. Kemudian, tetapkan atribut data-icon ke ikon pilihan anda.
• Untuk item aktif di bar navigasi, tetapkan atribut class ke "ui-btn-active".Kemudian, warna item ini akan lebih ringan daripada item lain di bar navigasi.
• Anda juga harus menggunakan atribut tema-data untuk menerapkan tema jQuery Mobile pada setiap item di bar navigasi. Jika tidak, butang di bar akan sama dengan tajuk yang lain. Untuk mengetahui lebih lanjut mengenai menerapkan tema, lihat gambar 15-12.

Cara memformat kandungan dengan jQuery Mobile

Seperti yang telah anda lihat, jQuery Mobile secara automatik memformat komponen halaman web berdasarkan helaian gaya sendiri. Sekarang, anda akan mengetahui lebih lanjut mengenai itu, serta cara menyesuaikan gaya lalai yang digunakan oleh jQuery Mobile.

Gaya lalai yang digunakan oleh jQuery Mobile

Gambar 15-13 menunjukkan gaya lalai yang digunakan jQuery Mobile untuk elemen HTML biasa. Untuk semua gaya, jQuery Mobile bergantung pada mesin rendering penyemak imbas sehingga gaya sendiri minimum. Ini menjadikan masa muat dengan cepat dan meminimumkan overhead yang akan dikenakan oleh CSS pada halaman.

Seperti yang anda lihat, gaya jQuery Mobile sangat berkesan sehingga anda tidak perlu mengubah gaya dengan menyediakan helaian gaya CSS anda sendiri. Sebagai contoh, jarak antara item dalam senarai yang tidak disusun dan pemformatan jadual boleh diterima dengan cara yang sama. Juga, jenis hitam pada latar belakang kelabu sesuai dengan format untuk aplikasi mudah alih asli.

Penerangan

• Secara lalai, jQuery Mobile secara automatik menerapkan gaya pada elemen HTML untuk halaman. Gaya ini tidak hanya menarik, tetapi juga meniru gaya asli penyemak imbas.
• Secara lalai, jQuery Mobile menerapkan sedikit padding ke kiri, kanan, atas, dan bawah setiap halaman mudah alih.
• Secara lalai, pautan sedikit lebih besar daripada teks biasa. Ini memudahkan pengguna mengetik pautan.
• Secara lalai, pautan digarisbawahi dengan warna biru sebagai warna fon.

Cara menerapkan tema pada elemen HTML

Dalam beberapa kes, anda ingin mengubah gaya lalai yang digunakan oleh jQuery Mobile. Anda sudah melihatnya di bar navigasi pada angka 15-10. Untuk menukar gaya lalai, anda boleh menggunakan lima tema yang disediakan oleh jQuery Mobile. Ini diringkaskan dalam gambar 15-12. Di sini sekali lagi, tema-tema ini bertujuan untuk meniru penampilan aplikasi mudah alih asli.

Salah satu cara untuk menerapkan tema adalah dengan mengekodkan atribut tema data dengan huruf tema sebagai nilainya. Anda melihatnya di bar navigasi pada gambar 15-10, dan anda dapat melihatnya dalam kod bar navigasi kedua dalam gambar ini. Di sini, atribut tema data menggunakan tema "e" pada tajuk dan tema "d" pada item di bar navigasi.

Cara lain untuk menerapkan tema adalah dengan menetapkan atribut kelas untuk elemen ke nama kelas yang menunjukkan tema. Ini digambarkan oleh contoh pertama selepas jadual. Di sini, atribut class digunakan untuk menerapkan kelas "ui-bar" dan "ui-bar-b" pada elemen div. Akibatnya, jQuery Mobile terlebih dahulu menerapkan gaya lalai untuk bar ke elemen dan kemudian menerapkan tema b untuk gaya tersebut. Di halaman yang berikut, anda akan melihat contoh gaya lain dari jenis ini.

Sila ambil perhatian bahawa jadual dalam gambar ini mengatakan untuk menggunakan tema dan dengan berhati-hati. Ini kerana ia menggunakan warna oren yang berfungsi dengan baik untuk memberi aksen pada item, tetapi tidak menarik dalam dos yang besar. Ini digambarkan oleh tajuk kedua dan bar navigasi dalam gambar ini, yang cenderung menjadi gemuruh apabila anda melihatnya berwarna.

Secara amnya, lebih baik kekal dengan gaya lalai dan tiga tema pertama, yang biasanya berfungsi dengan baik. Kemudian, anda boleh bereksperimen dengan tema d dan e apabila anda fikir anda memerlukan sesuatu yang lebih.

HTML untuk tajuk kedua dan bar navigasi:

header data-role = "header" data-tema = "e"> h1> Dewan Bandaraya SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "rumah "data-tema =" d "> Rumah / a> / li> li> a href =" # speaker "data-icon =" star "data-tema =" d "> Pembesar suara / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-tema = "d"> Berita / a> / li> / ul> / div> / header>

Lima tema jQuery Mobile:

Dua cara untuk menerapkan tema:

Dengan menggunakan atribut tema data:

li> a href = "# home" data-icon = "home" data-tema = "b"> Rumah / a> / li>

Dengan menggunakan atribut kelas yang menunjukkan tema:

div> Bar / div>

Penerangan

• Dengan menggunakan lima tema yang disertakan dengan jQuery Mobile, anda dapat membuat penyesuaian yang sesuai dengan gaya lalai untuk elemen HTML.
• Walaupun anda dapat menggunakan helaian gaya CSS anda sendiri dengan aplikasi jQuery Mobile, anda harus mengelakkannya bila boleh.

Perspektif

Penggunaan peranti mudah alih meningkat secara mendadak sejak beberapa tahun kebelakangan ini. Oleh kerana itu, menjadi semakin penting untuk merancang laman web yang mudah digunakan dari peranti ini. Walaupun ini biasanya bermaksud mengembangkan laman web yang berasingan, ini boleh menjadi aspek penting dalam menjaga kehadiran anda di Internet.

Nasib baik, tugas membina laman web mudah alih menjadi lebih mudah dengan munculnya jQuery Mobile. Halaman web mudah alih tidak lagi terhad kepada halaman statik yang mengandungi tajuk, perenggan, pautan, dan gambar kecil. Dengan jQuery Mobile, pembangun web kini dapat membina laman web kaya ciri yang kelihatan dan terasa seperti aplikasi mudah alih asli.