jQuery Mobile by DUMET School
Pt. Duta Media Teknologi
Kata Pengantar JQuery Mobile hadir karena dunia perangkat mobile sekarang sedang naik daun. Perangkat mobile seperti smartphone Android dan iPhone sudah semakin menjamur. Hal ini tentunya juga berdampak besar dalam pengembangan aplikasi website yang peruntukan untuk platform mobile. Banyak orang mulai melirik dunia web mobile yang menjajikan peluang yang tidak ditemui pada web desktop. Namun, untuk mendukungnyadibutuhkan lebih dari sekedar aplikasi web standar desktop, aplikasi yang benar-benar dibuat untuk pengguna yang menginginkan pengalaman berbeda diperangkat mobile mereka. Untuk itulah jQuery Mobile diciptakan. Dengan berbagai fitur ideal yang dipersiapkan untuk mengembangkan aplikasi web mobile, jQuery Mobile menjadi solusi yang layak untuk dicoba.Mulai dari penggunaannya yang mudah dalam proses pengembangan, hingga dukungan luas pada banyak platform mobile yang populer saat ini.
Setelah selesai belajar Framework ini, diharapkan mampu membuat Project untuk skala Enterprise. Akhir kata Kami berharap semoga pembaca dapat mengambil manfaat dari modul ini, khususnya dalam hal pengetahuan dalam belajar. Saran dan kritik silahkan dikirimkan ke info@dumetschool.com.
Tim Instruktur, DUMETschool
Daftar isi.. Kata Pengantar Daftar Isi bab 1
Pendahuluan 4 Apa Itu jQuery Moble 4 Perkembangan Perangkat Mobile 4 Aplikasi Web Mobile 4 Mengenal jQuery Mobile 5
bab 2
Instal jQuery Mobile 6 Download jQuery Mobile 6
bab 3
jQuery Mobile Pages 9 Mobile Page Struktur 9 Multiple Page 10 Page Dengan Dialog 12
bab 4
jQuery Mobile Transition Effects 13 Browser Support 13 Transition Effects 13
bab 5
jQuery Mobile Buttons 15 Button Group 15 Back Group 16 Inline Button 16 Class Tambahan Button 16
bab 6
jQuery Mobile Icons 17 Menambahkan Icon Pada Button 17 Icon Navbar 18 Icon Listview 18 Daftar Icon Class 18 Positioning Icon 20 Displaying Icon 20
bab 7
jQuery mobile Popups 22 Closing Popups 22 Positioning Popups 22 Popup Dialog 23 Popup Photo 24
bab 8
jQuery Mobile Toolbars 25 Positioning Header & Footer 25
bab 9
jQuery Mobile Navbars 26 Icon Navigation 26 Positioning Icon Navbar 26 Active Button Multiple Page 27
bab 10
jQuery Mobile Panels 28 Closing Panel 28 Panel Display 29 Panel Position 30
bab 11
jQuery Mobile Collapsibles 31 Collapsible content Block 31 Nested Collapsible Block 32 Collapsible Set 32
bab 12
jQuery Mobile Tables 34 Responsive Table 34 Reflow Table 34 Column Toggle Table 36 Coulmn Button Text 36 Styling Table 37
bab 13
jQuery Mobile Grid 38
bab 1..
Pendahuluan
Apa itu jQuery Mobile? JQuery Mobile adalah framework yang dioptimalkan untuk perangkat-perangkat layar sentuh (touch-optimized). Sebagai Library, jQuery Mobile yang juga dikenal sebagai library Javascipt maupun framework mobile ini dikembangkan oleh jQuery Project. Tujuan pengembangannya adalah berfokus pada pembuatan framework yang kompatibel dengan beraneka ragam perangkat smartphone dan tablet.
Perkembangan perangkat mobile Untuk bisa memanfaatkan jQuery Mobile dengan maksimal, kita harus mengetahui perkembangan perangkat mobile saat ini. Smartphone dan perangkat-perangkat mobile lain seperti tablet PC semakin polpuler. Model, harga, dan ukuran yang sangat bervariasi, hal ini tentunya dapat mempengaruhi cara berkomunikasi setiap orang yang lebih baru dan menarik. Berdasakan tren saat ini, jelas pemakaian internet mobile akan mengungguli desktop dalam beberapa waktu yang akan datang. Dua miliar orang di seluruh dunia memiliki perangkat mobile. Jumlah telephone seluler yang ada saat ini bahkan melebihi jumlah pemiliknya.Artinya semakin banyak orang yang akan menjelajahi web dan melakukan pencarian dengan menggunakan perangkan mobile. Dan mereka yang memanfaatkan mobile web tentunya akan lebih memiliki banyak peluang.
Aplikasi web mobile Aplikasi mobile dikenal dalam dua bentuk dasar. Bentuk pertama adalah aplikasi natif, merupakan aplikasi yang deprogram dan berjalan di atas perangkat. Bentuk lain adalah aplikasi web mobile yang berjalan di dalam browser web pada perangkat mobile. Aplikasi natif mempunyai beberapa kelebihan, misalnya akses lebih cepat, namun disisi lain aplikasi natif nentunya tidak bersifat portable. Apabila anda menginginkan aplikasi yang tersedia secara lintas platform, paling tidak anda harus membuat aplikasinya dalam beberapa bahasa pemrograman yang menghasilkan banyak basis kode yang merepotkan. Untuk menjawab kasus ini, pengembangan jQuery Mobile menjadi solusi yang tepat untuk kebanyakan situasi. Aplikasi web dibuat dengan HTML, CSS dan Javascript serta AJaX. Sehinggaaplikasi tersebut dapat berjalan pada semua browser web yang dimiliki oleh perangkat mobile. Sebuah aplikasi web mobile pada umumnya punya perhatian lebih pada user interface yang meniru aplikasi mobile natif. Aplikasi web bisa diimplementasikan dalam banyak cara, antara lain: 1. 2. 3. 4.
Diakses langsung dari browser Diinstal sebagai aplikasi layar penuh Sebagai widget Sebagai aplikasi web yang terinstal pada aplikasi natif, yang umumnya dikenal sebagai hybrid.
DUMET School
jQuery Mobile |
4
Mengenal JQuery Mobile
JQuery Mobile dikembangkan sebagai alternative yang menjawab kebutuhan akan pengembangan aplikasi web mobile dan memiliki banyak potensi. JQuery mobile sangat mungkin untuk membuat aplikasi web mobile yang penampilan dan interaktivitasnya konsisten disemua perangkat pendukung, serta memiliki kemampuan user interface yang canggih. JQuery Mobile merupakan system user interface berbasis HTML5 dan pengembangan dari library jQuery dan jQuery UI yang sangat populer saat ini. Kelebihan jQuery Mobile adalah kodenya ringan, menerapkan desain yang dapat beradaptasi dengan berbagai jenis perangkat mobile, dan menonjolkan markup semantik. Oleh karena itu, desainnya sangat fleksible dan mempunyai themes yang bisa disesuaikan. Hal ini membuat jQuery Mobile sangat mudah sekali untuk digunakan. JQuery Mobile memiliki sekumpulan plug-in dan widget yang dimaksudkan untuk menyiapkan API agar dapat dikenali di berbagai platform.
5 | jQuery Mobile
DUMET School
bab 2..
Instal jQuery Mobile
JQuery mempunyai sekumpulan file yang penting untuk digunakan dan harus diperhatikan setiap membuat halaman aplikasi web mobile. File-file utama yang diperlukan tersebut sebagai berikut: 1. 2. 3. 4.
File JavaScript jQuery dengan program fondasi untuk jQuery Mobile. File JavaScript jQuery Mobile. File CSS utama jQuery Mobile. File CSS theme jQuery Mobile (optional).
Yang perlu juga diketahui adalah jQuery Mobile juga akan menggunakan serangkaian file gambar berformat PNG untuk bebrapa elemen UI tertentu. Gambar tersebut digunakan sebagai fitur gambar ikon. Untuk menghubungkan file gambar tersebut dengan kode tidak perlu dilakukan secara langsung. File utama jQuery sudah ditulis program untuk menautkannya. Selain itu, ada juga CSS versi lain yang akan menyertakan file inti dan berupa theme bawaan.
Dowload jQuery Mobile Untuk menggunakan jQuer Mobile, ada beberapa hal yang harus dipertimbangkan sebelumnya tentang penyimpanan atau hosting file-file jQuery Mobile. JQuery Mobile menyediakan dua cara yang bisa diterapkan sesuai kebutuhan proyek, yaitu: 1. 2.
Menyimpan semua filenya di dalam hosting sendiri (self-hosted). Memakai CDN (Content Delivery Network) public yang disediakan bebrapa vendor.
Mana yang harus digunakan tidak menjadi masalah. Itu semua tergantung kebutuhan proyek. Untuk sementara, kita akan mempraktekan dengan menyimpan file jQuery Mobile di hosting sendiri (self-hosted). Untuk itu anda perlu mendownload semua file jQuery Mobile yang dibutuhkan di situs resminya http://jquerymobile. com/download.
DUMET School
jQuery Mobile |
6
jQuery Mobile yang didownload berupa file ZIP dengan versi tertentu. Jika diperhatikan, pada nama file ZIP tersebut akan terdapat versi jQuery Mobile yang diunduh.Sebagai contoh jquery.mobile-1.4.2.zip. Disarankan untuk mengunduh versi terbaru untuk meminimalkan bug yang bisa saja ditemui ditengah-tangah prosesnya. Saat ini jQuery Mobile versi terbaru sudah sampai 1.4.2.
Dalam file ZIP jquery.mobile-1.4.2.zip, yang akan anda temui adalah sekumpula file dan folder yang berkenaan dengan program jQuery Mobile. Beberapa isi file ZIP tersebut antara lain:
Kode 1.4.2 adalah angka versi yang didownload.Dalam beberapa file CSS dan JavaScript yang terdapat pada jQuery Mobile memiliki dua versi yaitu file dengan akhiran min dan tanpa akhiran min. Keduanya sama-sama kode JavaScript dan CSS jQuery Mobile dengan hasil yang sama pula. File ZIP yang baru kita download, tidak menyertakan file inti jQuery yang dibutuhkan jQuery Mobile. Jadi kita perlu mendownload kembali file inti jQuery secara terpisah darihttp://jquery.com/download. Di sini disarankan untuk download file min jQuery versi 2.1.1.
Jika semua file telah didownload, sekarang kita simpan file-file yang dibutuhkan sajake dalam folder js pada folder root yang akan kita buat.
7 | jQuery Mobile
DUMET School
Kemudian di dalam <head>buatlah tag <link /> untuk memanggil semua file CSS dan tag <script> untuk memanggil semua file JavaScript pada jQuery Mobile.
Jika proses di atas sudah dilakukan, maka jQuery Mobile sudah siap digunakan untuk membangun aplikasi web mobile.
DUMET School
jQuery Mobile |
8
bab 3..
jQuery Mobile Page
Halaman merupkan unit utama untuk berinteraksi dengan jQuery Mobile. BAB ini akan menjelaskan bagaimana membangun sebuah halaman jQuery Mobile.
Mobile Page Struktur Untuk membuat halaman jQuery Mobile harus dimulai dengan DOCTYPE HTML5. Adapun Struktur penulisannya sebagai berikut :
Keterangan : data-role=”page” mendefinisikan halaman container jQuery Mobile. Element ini selalu digunakan dalam membangun halaman multi-page. data-role=”header” mendefinisikan bagian header bar dan merupakan atribut optional. data-role=”main” mendefinisikan konten halaman yang berisi : text, image, button, form dan sebagainya. “ui-content” mendefinisikan class tambahan yang mengatur padding margin sebuah konten. data-role=”footer” mendefinisikan bagian bar yang terdapat di halaman bawah dan merupakan atribut optional.
viewport merupakan konfigurasi jQuery Mobile untuk pengaturan lebar dan skala halaman. device-width merupakan indikasi konten agar dapat diatur full width disetiap device. initial-scale=1 mendefinisikan pengaturan skala awal atau zoom untuk melihat halaman web. Fungsi meta viewport inilah yang membuat halaman website menjadi responsive.
9 | jQuery Mobile
DUMET School
Multiple Page Di jQuery mobile kita dapat membuat dua halaman atau lebih dalam satu file HTML.
DUMET School
jQuery Mobile | 10
Keterangan : Link #pagetwo mendefinisikan pemanggilan id =”pagetwo” pada halaman kedua. Link #pageone mendefinisikan pemanggilan id=”pageone” pada halaman pertama. TIPS : Untuk melihat efek load time ketika kita melakukan klik sebuah link maka gunakan eksternal file.
11 | jQuery Mobile
DUMET School
Page dengan Dialog Dialog mendefinisikan sebuah box halaman yang digunakan untuk menunjukkan informasi dari halaman tersebut. Untuk membuat halaman dialog kita harus menambahkan : data-dialog=â&#x20AC;?trueâ&#x20AC;?.
DUMET School
jQuery Mobile | 12
bab 4..
jQuery Mobile Transitions Effects
Browser Support Kelebihan jQuery Mobile diantaranya memiliki efek dari CSS3. Sebagai contoh ketika kita memilih efek transisi untuk membuka sebuah halaman. Untuk melihat hasil transisi browser yang kita gunakan harus mendukung CSS3 3D Transform :
Nomor browser pada tabel diatas merupakan versi minimum browser yang mendukung CSS3.
Transition Effects Untuk membuat Efek Transisi jQuery Mobile cukup menambahkan kode data-transition=â&#x20AC;?attributeâ&#x20AC;? dengan menambahkan nilai attribut seperti berikut :
Attribut transisi diatas memiliki efek yang berbeda. Sebagai contoh kita akan menggunakan attribute slide sebagai berikut :
Fungsi reverse mendefinisikan efek slide berlawanan arah ketika link #pageone diklik.
13 | jQuery Mobile
DUMET School
DUMET School
jQuery Mobile | 14
bab 5..
jQuery Mobile Buttons
Membuat sebuah tombol di jQuery Mobile terdapat 3 cara yakni : 1. Menggunakan elemen <input>.
2.
Menggunakan elemen <button> dengan class=”ui-btn”.
3.
Menggunakan elemen <a> dengan class=”ui-btn”.
Tombol di dalam jQuery Mobile sudah memiliki style otomatis yang menghasilkan desain yang atraktif. Dumet School menyarankan agar menggunakan elemen <a> dengan class=”ui-btn” untuk membuat link antar halaman. Sedangkan elemen <button> dan <input> digunakan untuk membuat form.
Button Group Dengan menambahkan data-role=”controlgroup” dengan data-type=”horizontal” atau “vertical” akan membuat elemen button menjadi group baik horizontal maupun vertical.
15 | jQuery Mobile
DUMET School
Back Button Back button berfungsi untuk memanggil halaman sebelumnya dengan cara memberikan data-rel=â&#x20AC;?backâ&#x20AC;? tanpa target link halaman.
Inline Button Inline button merupakan class yang berfungsi membuat beberapa tombol menjadi satu baris.
Class Tambahan Button Berikut class tambahan untuk membuat link tombol jQuery Mobile :
Catatan : Secara default elemen <input> sudah memiliki style shadow dan rounded corner.
DUMET School
jQuery Mobile | 16
bab 6..
jQuery Mobile Icons
jQuery Mobile menyediakan satu set icon yang akan membuat tombol terlihat lebih menarik.
Menambahkan Icon pada Button Untuk menambahkan icon pada elemen <button> dan <a> di jQuery Mobile, gunakanlah ui-icon class dan position. Contohnya ui-btn-icon-left.
Untuk menambah icon pada elemen <input> gunakanlah data-icon=””.
Icon Navbar Menambah icon pada navbar button gunakanlah data-icon=””.
17 | jQuery Mobile
DUMET School
Icon Listview Menambah icon pada list button gunakanlah data-icon=â&#x20AC;?â&#x20AC;? pada <li>
Daftar Icon Class Berikut list icon yang sudah tersedia didalam jQuery Mobile :
DUMET School
jQuery Mobile | 18
19 | jQuery Mobile
DUMET School
Positioning Icon Untuk memposisikan icon kita menggunakan ui-btn-icon yang diikuti dengan posisi yakni : top, right, bottom, left. Perhatikan kode jQuery berikut :
Displaying Icon Pada jQuery Mobile tampilan icon dapat kita modifikasi dengan cara menambahkan class sebagai berikut :
DUMET School
jQuery Mobile | 20
Keterangan : ui-btn-inline mendefinisikan icon akan ditampilkan satu baris. ui-corner-all mendefinisikan tampilan icon menjadi lingkaran tanpa kotak (default). ui-btn-icon-notext mendefinisikan tampilan icon tanpa teks. Secara default semua icon di jQuery Mobile berwarna putih. Untuk mengubahnya berwarna hitam gunakanlah class ui-alt-icon . ui-nodisc-icon merupakan fungsi untuk menghilangkan lingkaran pada icon.
21 | jQuery Mobile
DUMET School
bab 7..
jQuery Mobile Popups
Popup memiliki kesamaan dengan dialog box. Bedanya adalah sebuah Popup dapat digunakan untuk menampilkan text, photo, maps dan konten lainnya. Untuk membuat sebuah popup gunakan elemen <a> dan elemen <div>. Pada elemen <a> tambahkan datarel=”popup” dan href id. Pada elemen <div> tambahkan data-role=”popup” dan id yang akan dipanggil oleh elemen <a>. Perhatikan contoh berikut :
Closing Popups Untuk menambah tombol closing pada popup gunakan class ui-icon-delete dan ui-btn-icon-notext dengan posisi uibtn-left atau ui-btn-right. Pada link button <a> tambahkan data-rel=”back”. Perhatikan contoh berikut :
Positioning Popups Posisi Popup dapat diatur dengan dengan menggunakan data-position diantaranya :
DUMET School
jQuery Mobile | 22
Popup Dialog Kita dapat menambah dialog standard pada popup dengan menampilkan header, content, footer.
23 | jQuery Mobile
DUMET School
Popup Photo
DUMET School
jQuery Mobile | 24
bab 8..
jQuery Mobile Toolbar
Toolbar merupakan elemen yang digunakan untuk mempermudah user mengakses navigasi. Toolbar biasanya ditempatkan pada header dan footer. Pada bagian header biasanya toolbar berisi logo, atau tombol navigasi seperti tombol home dan search. Sedangkan toolbar di bagian footer lebih fleksibel yang dapat berisi banyak tombol navigasi. Berikut contoh penulisan toolbar jQuery Mobile :
Kita juga dapat membuat group vertical atau horizontal pada tombol atau navigasi toolbar yang terdapat di footer sebagai berikut :
Positioning Header dan Footer Ada 3 cara untuk mengatur posisi header dan footer, yaitu : 1. data-position=”inline” merupakan posisi Default header dan footer 2. data-position=”fixed” mendefinisikan posisi header dan footer tetap / tidak berubah apabila dilakukan scroll. 3. data-fullscreen=”true” sama seperti fixed. Bedanya jika layar di sentuh / di tap maka header dan footer akan menghasilkan efek hide dan show.
25 | jQuery Mobile
DUMET School
bab 9..
jQuery Mobile Navbars
Navigasi Bar merupakan sekelompok link sejajar atau horizontal yang biasanya terdapat pada bagian header atau footer. Pembuatan navbar ditulis dengan menggunakan kode <ul><li> yang dibungkus dengan <div> elemen yang berisi atribut data-role=”navbar”. Perhatikan kode berikut :
Icon Navigation Tambahkan data-icon=”” pada elemen <li>.
Positioning Icon Navbar Dengan menambahkan data-iconpos pada elemen <div> kita dapat menentukan posisi icon pada navbar : top, right, bottom, left.
DUMET School
jQuery Mobile | 26
Active Botton Multiple Page Untuk membuat tombol active pada navbar tambahkan class ui-btn-active dan ui-state-persist pada elemen <li>. Untuk lebih jelas buatlah dua halaman seperti berikut :
27 | jQuery Mobile
DUMET School
bab 10
jQuery Mobile Panels
Panel di jQuery Mobile memiliki efek slide out dari kiri ataupun kanan. Jika sebuah tombol diklik maka panel akan menggeser halaman tersebut. Buatlah kode seperti berikut :
Closing Panel Jika ingin membuat sebuah tombol closing pada panel, tambahkan data-rel=â&#x20AC;?closeâ&#x20AC;? pada link yang terdapat didalam elemen <div> panel.
DUMET School
jQuery Mobile | 28
Panel Display Untuk memberikan efek tampilan yang berbeda tambahkan data-display=”” pada elemen <div> panel. Ada 3 efek untuk menampilkan panel sebagai berikut : 1. data-display=”overlay” mendefinisikan panel akan ditampilkan diatas konten. 2. data-display=”push” memberikan efek animasi mendorong halaman. 3. data-display=”reveal” merupakan default. Panel akan ditampilkan dengan cara memberikan efek slide pada halaman. Panel akan terlihat seperti berada dibawah halaman.
Agar lebih memahami silahkan buat kode jQuery Mobile seperti berikut :
Simpan kode diatas dengan nama panel-display.html dan jalankan pada browser maka akan terlihat hasilnya sebagai berikut :
29 | jQuery Mobile
DUMET School
Kemudian buatlah panel-nya dengan cara menambahkan kode panel tepat berada diatas elemen <div datarole=”header”> seperti berikut :
Simpan dan lihat hasil panel display di browser.
Panel Position Secara default posisi panel berada disebelah kiri screen atau halaman. Untuk mengubah posisi panel berada disebelah kanan cukup dengan menambahkan data-position=”right” pada elemen <div> panel.
Untuk membuat panel tetap pada halaman pada saat dilakukan scroll maka tambahkan data-position-fixed=”true”.
DUMET School
jQuery Mobile | 30
bab 11
jQuery Mobile Collapsibles
Collapsible Content Block Collapsibles mendefinisikan bagian informasi konten yang dapat disembunyikan atau ditampilkan. Untuk membuat sebuah collapsible block konten gunakan elemen <div> tambahkan didalamnya data-role=”collapsible” dan sebuah header (H1-H6).
Secara default konten tidak ditampilkan sebelum dilakukan klik pada collapsible. Untuk membuat konten ditampilkan pada saat halaman di akses gunakan data-collapsed=”false” seperti berikut :
31 | jQuery Mobile
DUMET School
Nested Collapsible Block Collapsible konten block dapat dibuat didalam collapsible seperti berikut :
Collapsible Set Kalau kita ingin membuat beberapa collapsible kita harus membuat collapsible set yang merupakan pembungkus collapsible yaitu dengan menambahkan data-role=â&#x20AC;?collapsiblesetâ&#x20AC;? seperti berikut :
DUMET School
jQuery Mobile | 32
33 | jQuery Mobile
DUMET School
bab 12
jQuery Mobile Tables
Responsive Table Responsive desain akan bekerja ketika kita ingin melihat tampilan konten web pada mobile device yang berbeda. Di jQuery Mobile untuk membuat table menjadi responsive merupakan hal yang mudah dikarenakan jQuery Mobile telah mendukung fungsi responsive yang berasal dari class yang sederhana. Responsive table akan memberikan tampilan yang lebih atraktif untuk mobile dan desktop. Ada 2 tipe responsive table yaitu : reflow dan column toggle.
Reflow Table Reflow table akan membuat tampilan table horizontal sampai pada minimum screen maka semua row akan menjadi group dan ditampilkan secara vertical. Untuk membuat sebuah reflow table tambahkan data-role=”table” dan class=”uiresponsive”. Buatlah Struktur halaman jQuery Mobile sebagai berikut :
Buatlah sebuah tabel yang terdiri dari 5 baris didalam elemen <div> main seperti berikut :
DUMET School
jQuery Mobile | 34
Catatan : Agar responsive table bekerja dengan baik kita harus menyertakan elemen <thead> dan <tbody> . Jangan menggunakan rowspan atau colspan attribute karena attribute tersebut tidak mendukung responsive. Simpan kode jQuery Mobile dan jalankan pada browser. Untuk melihat efek reflow silahkan resize ukuran layar.
Tampilan table pada screen max 550px :
35 | jQuery Mobile
DUMET School
Column Toggle Table Column toggle berfungsi menyembunyikan kolom ketika lebar layar tidak cukup untuk menampilkan semua data. Untuk membuat sebuah column toggle tambahkan class sebagai berikut :
Secara default jQuery Mobile akan menyembunyikan kolom yang berada disisi kanan tabel. Oleh karena itu kita dapat membuat prioritas column mana yang ditampilkan atau disembunyikan. Caranya dengan menambahkan data-priority pada header table <th> dengan memberikan nilai prioritas 1 ( prioritas utama ) samapai 6 ( prioritas rendah ). Buatlah datapriority pada table seperti berikut dan lihat hasilnya.
Column Button Text Untuk mengubah teks tombol column toggle tambahkan data-column-btn-text=â&#x20AC;?tulis teksâ&#x20AC;? pada elemen <table> seperti berikut :
DUMET School
jQuery Mobile | 36
Styling Table Membuat efek shadow pada table tambahkan class ui-shadow.
Membuat border bottom pada semua row dengan membuat style css sebagai berikut :
Menambahkan stlyle background pada row.
37 | jQuery Mobile
DUMET School
bab 13
jQuery Mobile Grids
JQuery Mobile menyediakan satu set berbasis CSS kolom layout. Namun, layout kolom umumnya tidak dianjurkan pada perangkat mobile karena lebar layar mobile. Tapi ada saat-saat ketika kita menginginkan posisi elemen yang lebih kecil, seperti tombol atau tab navigasi berdampingan seperti dalam sebuah tabel. Maka kolom layout menjadi solusi membuat tampilan layar mobile yang berbeda. Lebar Kolom didalam sebuah grid sama dengan 100%, tanpa perbatasan, latar belakang, margin atau padding. Ada 5 layout grid yang dapat digunakan yaitu :
Keterangan : Grid Class mendefinisikan elemen grid container. Corresponds merupakan child class untuk membuat lebar kolom. Contoh : Untuk membuat 2 kolom (50%/50%) maka kita akan membuat elemen container dengan class ui-grid-a kemudian diikuti dengan elemen class ui-block-a untuk kolom pertama dan class ui-block-b untuk kolom kedua. Untuk lebih memahami silahkan buat struktur grid seperti dibawah ini :
DUMET School
jQuery Mobile | 38
39 | jQuery Mobile
DUMET School
Ruko Permata Regency Blok B 18. Jalan Haji Kelik, Srengseng. Jakarta Barat. 11630 t. (021) 5890 8355 - f. (021) 5890 8355 support@dumetschool.com - info@dumetschool.com www.dumetschool.com