Buat situs web seluler dengan jQuery Mobile

Isi

• Cara membuat kode beberapa halaman dalam satu file HTML
• Deskripsi
• Cara menggunakan kotak dialog dan transisi
• Transisi yang dapat digunakan
• Deskripsi
• Cara membuat tombol
• Deskripsi
• Cara membuat bilah navigasi
• Cara membuat kode HTML untuk bilah navigasi:
• Cara memformat konten dengan jQuery Mobile
• Gaya default yang digunakan jQuery Mobile
• Deskripsi
• Bagaimana menerapkan tema ke elemen HTML
• Dua cara untuk menerapkan tema:
• Deskripsi
• Perspektif

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

jQuery Mobile adalah pustaka JavaScript gratis, sumber terbuka, lintas platform yang dapat Anda gunakan untuk mengembangkan situs web seluler. Pustaka ini memungkinkan Anda membuat halaman yang terlihat dan terasa seperti halaman aplikasi seluler asli.

Meskipun jQuery Mobile saat ini tersedia sebagai versi pengujian beta, versi ini sudah menyediakan semua fitur yang Anda butuhkan untuk mengembangkan situs web seluler yang luar biasa. Hasilnya, Anda bisa langsung mulai menggunakannya. Anda juga dapat mengharapkan versi ini terus ditingkatkan, jadi jQuery Mobile hanya akan menjadi lebih baik.

Dalam artikel ini, Anda akan mempelajari teknik dasar untuk membuat halaman situs web seluler. Itu akan mencakup penggunaan kotak dialog, tombol, dan bilah navigasi.

Cara membuat kode beberapa halaman dalam satu file HTML

Berbeda dengan cara Anda mengembangkan halaman web untuk situs web layar, jQuery Mobile memungkinkan Anda membuat banyak halaman dalam satu file HTML. Ini diilustrasikan oleh gambar 15-7. Di sini, Anda dapat melihat dua halaman situs bersama dengan HTML untuk halaman tersebut. Yang mengejutkan adalah kedua halaman tersebut dikodekan dalam satu file HTML.

Untuk setiap halaman, Anda memberi kode satu elemen div dengan "halaman" sebagai nilai atribut data-role. Kemudian, di dalam setiap elemen div tersebut, Anda mengkodekan elemen div untuk header, konten, dan footer dari setiap halaman. Nanti, saat file HTML dimuat, halaman pertama di badan file akan ditampilkan.

Untuk menghubungkan antara halaman dalam file HTML, Anda menggunakan placeholder seperti yang ditunjukkan pada gambar 7-11 dari bab 7. Misalnya, elemen a> di halaman pertama dalam contoh ini pergi ke "#toobin" saat pengguna mengetuk elemen h2 atau img yang dikodekan sebagai konten untuk tautan ini. Ini mengacu pada elemen div dengan "toobin" sebagai atribut id-nya, yang berarti bahwa mengetuk tautan akan membawa pembaca ke halaman kedua dalam file.

Meskipun contoh ini hanya menampilkan dua halaman, Anda dapat membuat kode banyak halaman dalam satu file HTML. Ingat, bagaimanapun, bahwa semua halaman bersama dengan gambar, JavaScript, dan file CSS dimuat dengan satu file HTML. Akibatnya, waktu buka akan menjadi berlebihan jika Anda menyimpan terlalu banyak halaman dalam satu file. Jika itu terjadi, Anda dapat membagi halaman Anda menjadi lebih dari satu file HTML.

HTML untuk dua halaman dalam badan satu file HTML:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> The 2011-2012 Speakers / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 Oktober 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - ELEMEN UNTUK SISA PEMBICARA - -> / bagian> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> Balai Kota SJV / h1> / header> bagian data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Penulis buku terlaris yang diakui secara kritis, i> The Nine:! - THE COPY CONTINUES -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Deskripsi

• Saat Anda menggunakan jQuery Mobile, Anda tidak perlu mengembangkan file HTML terpisah untuk setiap halaman. Sebagai gantinya, dalam elemen badan file HTML tunggal, Anda memberi kode satu elemen div untuk setiap halaman dengan atribut datanya disetel ke "halaman".
• Untuk setiap elemen div, Anda menyetel atribut id ke nilai placeholder yang dapat diakses oleh atribut href di elemen a> halaman lain.

Cara menggunakan kotak dialog dan transisi

Gambar 15-8 menunjukkan cara membuat kotak dialog yang terbuka saat link diketuk. Untuk melakukan itu, Anda memberi kode pada kotak dialog seperti yang Anda lakukan pada halaman manapun. Tapi di elemen a> yang menuju ke halaman itu, Anda mengkodekan atribut data-rel dengan “dia- log” sebagai nilainya.

Seperti contoh pada gambar ini, file CSS Seluler jQuery memformat kotak dialog berbeda dari halaman web biasa. Secara default, kotak dialog akan memiliki latar belakang gelap dengan teks latar depan putih, dan header serta footer tidak akan menjangkau lebar halaman. Kotak dialog juga akan memiliki "X" di header yang harus diketuk pengguna untuk kembali ke halaman sebelumnya.

Saat Anda membuat kode elemen a> yang menuju ke halaman lain atau kotak dialog, Anda juga dapat menggunakan atribut data-transisi untuk menentukan salah satu dari enam transisi yang diringkas dalam tabel di gambar ini. Masing-masing transisi ini dimaksudkan untuk meniru efek yang digunakan perangkat seluler seperti iPhone.

Transisi yang dapat digunakan

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

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

HTML yang membuka halaman dengan transisi "fade":

a href = "# toobin" data-transisi = "fade">

Deskripsi

• HTML untuk a kotak dialog dikodekan dengan cara halaman manapun dikodekan. Namun, elemen a> yang tertaut ke halaman menyertakan atribut data-rel dengan "dialog" sebagai nilainya. Untuk menutup kotak dialog, pengguna mengetuk X di header kotak.
• Untuk menentukan cara halaman atau kotak dialog dibuka, Anda dapat menggunakan atribut data-transisi dengan salah satu nilai dalam tabel di atas. Jika perangkat tidak mendukung transisi yang Anda tentukan, atribut ini diabaikan.
• Penataan gaya untuk kotak dialog dilakukan oleh file jQuery Mobile CSS.

Cara membuat tombol

Gambar 15-9 menunjukkan bagaimana menggunakan tombol untuk berpindah dari satu halaman ke halaman lainnya. Untuk melakukan itu, Anda cukup mengatur atribut data-role untuk elemen a> ke "tombol", dan jQuery Mobile akan melakukan sisanya.
Namun, Anda juga dapat menyetel beberapa atribut lain untuk tombol. Jika, misalnya, Anda ingin dua atau lebih tombol muncul berdampingan, seperti dua tombol pertama pada gambar ini, Anda dapat menyetel atribut data-inline ke "true".

Jika Anda ingin menambahkan salah satu dari 18 ikon yang disediakan oleh jQuery Mobile ke sebuah tombol, Anda juga akan mengkodekan atribut data-icon. Misalnya, tombol ketiga dalam contoh ini menggunakan ikon "hapus", dan tombol keempat menggunakan ikon "beranda". Semua ikon ini terlihat seperti ikon yang mungkin Anda lihat dalam aplikasi seluler asli. Secara kebetulan, ikon ini bukanlah file terpisah yang harus diakses halaman. Sebagai gantinya, mereka disediakan oleh perpustakaan jQuery Mobile.

Jika Anda ingin mengelompokkan dua atau lebih tombol secara horizontal, seperti tombol Yes, No, dan Maybe pada gambar ini, Anda dapat membuat kode a> elemen untuk tombol dalam elemen div yang memiliki "controlgroup" sebagai atribut datanya dan "Horizontal" sebagai atribut tipe datanya. Atau, untuk mengelompokkan tombol secara vertikal, Anda dapat mengubah atribut tipe data menjadi "vertikal".

Jika Anda menyetel atribut data-rel untuk tombol ke "kembali" dan atribut href ke simbol pagar (#), tombol akan kembali ke halaman yang memanggilnya. Dengan kata lain, tombol tersebut berfungsi seperti tombol Kembali. Ini diilustrasikan oleh tombol terakhir di konten halaman.

Dua tombol terakhir menunjukkan bagaimana tombol muncul di footer untuk sebuah halaman. Di sini, ikon dan teks berwarna putih dengan latar belakang hitam. Dalam kasus ini, atribut class untuk footer disetel ke "ui-bar", yang memberi tahu jQuery Mobile bahwa ia harus memberi lebih banyak ruang di sekitar konten footer. Anda akan mempelajari lebih lanjut tentang itu di gambar 15-12.

HTML untuk tombol di bagian:

! - Untuk tombol sebaris, setel atribut data-line ke true -> a href = "#" data-role = "button" data-inline = "true"> Cancel / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Untuk menambahkan ikon ke tombol, gunakan atribut data-icon -> tombol a href = "#" data-role = " "data-icon =" delete "> Hapus / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Untuk mengelompokkan tombol, 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 = "button"> Mungkin / a> / div>! - Kepada kode tombol Kembali, setel atribut data-rel ke belakang -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Kembali ke halaman sebelumnya / a >

HTML untuk tombol di footer:

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>

Deskripsi

• Untuk menambahkan tombol ke halaman web, Anda mengkodekan elemen a> dengan atribut datanya disetel ke "tombol".

Cara membuat bilah navigasi

Gambar 15-10 menunjukkan bagaimana Anda dapat menambahkan bilah navigasi ke halaman web. Untuk melakukan itu, Anda membuat kode elemen div dengan peran datanya disetel ke "navbar". Di dalam elemen ini, Anda memberi kode elemen ul yang berisi elemen li yang berisi elemen a> untuk item di bilah navigasi. Namun, perhatikan bahwa Anda tidak mengkodekan atribut data-role untuk a> elements.

Untuk mengubah warna item di bilah navigasi, kode dalam contoh ini menyertakan atribut data-theme-b untuk setiap item. Alhasil, jQuery Mobile mengubah warna latar belakang setiap item dari hitam, yang merupakan default, menjadi biru yang menarik. Selain itu, kode ini menetapkan atribut class untuk tombol aktif menjadi "ui-btn-active" sehingga jQuery Mobile mengubah warna tombol aktif menjadi biru muda. Ini menunjukkan bagaimana Anda dapat mengubah pemformatan yang digunakan oleh jQuery Mobile, dan Anda akan mempelajari lebih lanjut tentang itu selanjutnya.

HTML untuk bilah navigasi:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Beranda / a> / li> li> a href =" # speaker "data-icon =" star "data-theme =" b "> Speaker / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Hubungi Kami / a> / li> / ul> / div> / header>

Cara membuat kode HTML untuk bilah navigasi:

• Kode elemen div dalam elemen header. Kemudian, setel atribut data-role untuk elemen div ke "navbar".
• Di dalam elemen div, kodekan elemen ul yang berisi satu elemen li untuk setiap tautan.
• Dalam setiap elemen li, kodekan elemen a> dengan atribut href yang menggunakan placeholder untuk halaman yang akan dituju link. Kemudian, setel atribut data-icon ke ikon yang Anda pilih.
• Untuk item aktif di menu navigasi, setel atribut class ke "ui-btn-active".Kemudian, warna item ini akan lebih terang dari item lain di bilah navigasi.
• Anda juga harus menggunakan atribut data-theme untuk menerapkan tema jQuery Mobile ke setiap item di bilah navigasi. Jika tidak, warna tombol di bilah akan sama dengan warna header lainnya. Untuk mempelajari lebih lanjut tentang menerapkan tema, lihat gambar 15-12.

Cara memformat konten dengan jQuery Mobile

Seperti yang telah Anda lihat, jQuery Mobile secara otomatis memformat komponen halaman web berdasarkan lembar gayanya sendiri. Sekarang, Anda akan mempelajari lebih lanjut tentang itu, serta cara menyesuaikan gaya default yang digunakan jQuery Mobile.

Gaya default yang digunakan jQuery Mobile

Gambar 15-13 menunjukkan gaya default yang digunakan jQuery Mobile untuk elemen HTML umum. Untuk semua gayanya, jQuery Mobile mengandalkan mesin rendering browser sehingga gayanya sendiri minimal. Hal ini membuat waktu muat cepat dan meminimalkan overhead yang akan dibebankan oleh CSS yang berlebihan pada halaman.

Seperti yang Anda lihat, gaya jQuery Mobile sangat efektif sehingga Anda tidak perlu mengubah gaya dengan menyediakan lembar gaya CSS Anda sendiri. Misalnya, jarak antara item dalam daftar tidak berurutan dan pemformatan tabel keduanya dapat diterima sebagaimana adanya. Selain itu, jenis hitam pada latar belakang abu-abu konsisten dengan pemformatan untuk aplikasi seluler asli.

Deskripsi

• Secara default, jQuery Mobile secara otomatis menerapkan gaya ke elemen HTML untuk sebuah halaman. Gaya ini tidak hanya menarik, tetapi juga meniru gaya asli browser.
• Secara default, jQuery Mobile menerapkan sedikit padding ke kiri, kanan, atas, dan bawah setiap halaman seluler.
• Secara default, link berukuran sedikit lebih besar dari teks normal. Ini memudahkan pengguna untuk mengetuk tautan.
• Secara default, tautan digarisbawahi dengan warna biru sebagai warna font.

Bagaimana menerapkan tema ke elemen HTML

Dalam beberapa kasus, Anda mungkin ingin mengubah gaya default yang digunakan jQuery Mobile. Anda sudah melihatnya di bilah navigasi gambar 15-10. Untuk mengubah gaya default, Anda dapat menggunakan lima tema yang disediakan jQuery Mobile. Ini diringkas dalam gambar 15-12. Sekali lagi, tema ini dimaksudkan untuk meniru tampilan aplikasi seluler asli.

Salah satu cara untuk menerapkan tema adalah dengan mengkodekan atribut data-tema dengan huruf tema sebagai nilainya. Anda melihat ini di bilah navigasi pada gambar 15-10, dan Anda dapat melihatnya pada kode untuk bilah navigasi kedua pada gambar ini. Di sini, atribut data-theme menerapkan tema "e" ke header dan tema "d" ke item di bilah navigasi.

Cara lain untuk menerapkan tema adalah dengan menyetel atribut kelas untuk elemen ke nama kelas yang menunjukkan tema. Ini diilustrasikan oleh contoh pertama setelah tabel. Di sini, atribut kelas digunakan untuk menerapkan kelas "ui-bar" dan "ui-bar- b" ke elemen div. Akibatnya, jQuery Mobile pertama-tama menerapkan gaya defaultnya untuk bilah ke elemen dan kemudian menerapkan tema b ke gaya itu. Di halaman berikutnya, Anda akan melihat contoh lain dari jenis gaya ini.

Harap dicatat bahwa tabel pada gambar ini mengatakan untuk menggunakan tema e dengan hemat. Itu karena menggunakan warna oranye yang berfungsi baik untuk aksen item, tetapi tidak menarik dalam dosis besar. Hal ini diilustrasikan oleh tajuk kedua dan bilah navigasi pada gambar ini, yang cenderung menggelegar saat Anda melihatnya berwarna.

Secara umum, yang terbaik adalah tetap menggunakan gaya default dan tiga tema pertama, yang biasanya bekerja sama dengan baik. Kemudian, Anda dapat bereksperimen dengan tema d dan e saat Anda merasa membutuhkan sesuatu yang lebih.

HTML untuk tajuk kedua dan bilah navigasi:

header data-role = "header" data-theme = "e"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Beranda / a> / li> li> a href =" # speaker "data-icon =" star "data-theme =" d "> Speaker / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Berita / a> / li> / ul> / div> / header>

Lima tema Seluler jQuery:

Dua cara untuk menerapkan tema:

Dengan menggunakan atribut data-theme:

li> a href = "# home" data-icon = "home" data-theme = "b"> Beranda / a> / li>

Dengan menggunakan atribut class yang menunjukkan tema:

div> Bilah / div>

Deskripsi

• Dengan menggunakan lima tema yang disertakan dengan jQuery Mobile, Anda dapat membuat penyesuaian yang sesuai dengan gaya default untuk elemen HTML.
• Meskipun Anda dapat menggunakan lembar gaya CSS Anda sendiri dengan aplikasi jQuery Mobile, Anda harus menghindari melakukan itu jika memungkinkan.

Perspektif

Penggunaan perangkat seluler telah meningkat secara dramatis selama beberapa tahun terakhir. Karena itu, merancang situs web yang mudah digunakan dari perangkat ini menjadi semakin penting. Meskipun itu biasanya berarti mengembangkan situs web terpisah, ini dapat menjadi aspek penting untuk mempertahankan keberadaan Anda di Internet.

Untungnya, tugas membangun situs web seluler menjadi lebih mudah dengan munculnya jQuery Mobile. Halaman web seluler tidak lagi terbatas pada halaman statis yang berisi judul, paragraf, link, dan gambar thumbnail. Dengan jQuery Mobile, pengembang web sekarang dapat membangun situs web kaya fitur yang terlihat dan terasa seperti aplikasi seluler asli.