Tutorial jQuery Mobile Part 4: Tombol

Aplikasi mobile yang dibangun diatas kesederhanaan hanya dengan menekan hal-hal yang kita inginkan akan ditampilkan.

Gambar 12. Tampilan Button pada page

Membuat Sebuah Button

Sebuah button di jQuery Mobile dapat dibuat dengan tiga cara :

Menggunakan element <input>
Menggunakan element <button> dengan class = “ui-button”
Menggunakan element <a> dengan class = “ui-button”

<input>

Untuk mempelajari tentang penggunaan <input> lakukan tutorial berikut:

1. Buka Notepad++
2. Lakukan copy paste script berikut ke dalam Notepad++

Code 7. Code untuk membuat button.

3. Simpan dengan nama tutorial-part4-tombol.html

4. Hasilnya dari script diatas dapat ditampilkan sebagai berikut:

Gambar 12. Hasil dari code 7

<button>

<button class="ui-btn">Button</button>

Berikut Hasilnya:

Code 8. Code untuk membuat button dengan class ui-btn

Gambar 18. Hasil dari code 8

<a>

<a href="#anylink" class="ui-btn">Button</a>

Berikut Hasilnya:

Code 9. Code untuk membuat button dengan a href class ui-btn

Gambar 19. Hasil dari code 9

Buttons di jQuery Mobile bergaya secara otomatis, membuatnya menarik dan bisa digunakan pada kedua perangkat mobile dan komputer desktop.

Disarankan untuk menggunakan elemen <a> dengan class="ui-btn" untuk link antar halaman, dan elemen <input> atau <button> untuk pengiriman formulir.

Sebelum versi 1.4, digunakan data-role="button" atribut untuk membuat button di jQuery Mobile. Pada 1.4, class penggunaan CSS framework untuk button style (kecuali <input> buttons).

Untuk menghubungkan antara halaman dengan button, gunakan elemen <a> dengan class = "ui-btn"

Code 10. Code untuk menghubungkan antar halaman dengan elemen <a>

Gambar 20. Hasil dari code 10

Grouped Button

jQuery Mobile menyediakan cara mudah untuk mengelompokkan buttons bersama-sama.

Menggunakan data-role="controlgroup" atribut bersama-sama dengan data-type="horizontal | vertikal" dalam elemen kontainer, untuk menentukan apakah group buttons tersebut horizontal atau vertikal :

Code 11. Code untuk membuat Grouped Button

Gambar 21. Hasil dari code 11

Inline Button

Secara default, buttons dapat mengambil layar lebar penuh. Jika Anda ingin buttons yang hanya selebar isinya, atau jika Anda ingin dua atau lebih buttons untuk tampil berdampingan, tambahkan "ui-btn-inline" class :

Code 12. Code untuk membuat Inline Button

Gambar 22. Hasil dari code 12

Secara default, grouped buttons dikelompokkan secara vertikal tanpa margin dan ruang antaranya. Dan hanya buttons yang pertama dan terakhir memiliki sudut bulat, menghasilkan tampilan yang bagus ketika dikelompokkan bersama-sama.

Class CSS yang lain untuk Link Button

Class	Penjelasan	Contoh
ui-btn-b	Mengubah warna tombol untuk latar belakang hitam dengan teks putih ( default adalah latar belakang abu-abu dengan teks hitam). Penggunaan: class=”ui-btn-b”
ui-corner-all	Menambah sudut bulat pada button. penggunaan: class=”ui-corner all”
ui-mini	Membuat ukuran button lebih kecil. penggunaan: class=”ui-mini”
ui-shadow	Menambah bayangan pada button. penggunaan: class=”ui-shadow”

Jika Anda ingin menggunakan lebih dari satu class, memisahkan masing-masing kelas dengan spasi, seperti: class =”ui-btn ui-btn-inline ui-btn-corner-all ui-shadow”

Secara default, <input> tombol memiliki shadow dan corner akan tetapi <a> dan <button> tidak memiliki elemen ini.

Latihan Part 4

Kerjakan Latihan Part 4 berikut ini:

Setelah mempelajari Tutorial Mobile Part 2 dan Tutorial Part 3 diatas yang dikombinasikan dengan perintah tag HTML, Buatlah halaman Home yang berisi tentang halaman Home SiS+ sesuai dengan tampilan berikut ini:

Ketika di klik button “Log In With RinfoApps”

Maka akan tampil ini: