Daftar

Gimana Sih Cara Membuat Button Pada jQuery Mobile?

Untuk membuat button pada jQuery Mobile, bisa dilakukan dengan 3 cara. Yaitu menggunakan tag <input> atau <button> dan bisa juga menggunakan tag <a>. Jika menggunakan <button> atau <a> maka perlu ditambahkan atribut CSS class=“ui-btn”.

Cara pembuatan Button

Perhatikan 3 contoh berikut:

Tag input: <input type=“button” value=“Tombol 1”>

Tag button: <button class=“ui-btn”>Tombol 2</button>

Tag a: <a href=“#link” class=“ui-btn”>Tombol 3</a>

Untuk melihat bagaimana tampilannya, silahkan ketik kode untuk latihan berikut ini, simpan dengan nama file jqm_button.html. Kemudian akses menggunakan browser + Ripple Emulator dan lihat tampilannya.

  1. <!DOCTYPE html>
  2. <html lang=“ID”>
  3. <head>
  4. <title>Membuat Button</title>
  5. <meta charset=“utf-8”>
  6. <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7. <meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1”>
  9. <link rel=“stylesheet” href=“jquery.mobile-1.4.5.min.css” />
  10. <script src=“jquery-1.11.1.min.js”></script>
  11. <script src=“jquery.mobile-1.4.5.min.js”></script>
  12. </head>
  13. <body>
  15. <div data-role=“page”>
  16. <header data-role=“header”>
  17. <h1>Button</h1>
  18. </header>
  19. <div data-role=“content”>
  20. <p>Tombol 1 tag <b>input</b>, Tombol 2 tag <b>button</b>, Tombol 3 tag <b>a</b>.</p>
  21. <p>
  22. <input type=“button” value=“Tombol 1”>
  23. <button class=“ui-btn”>Tombol 2</button>
  24. <a href=“#link” class=“ui-btn”>Tombol 3</a>
  25. </p>
  26. </div>
  27. <footer data-role=“footer” data-position=“fixed”>
  28. <h2>banghaji dot com</h2>
  29. </footer>
  30. </div>
  32. </body>
  33. </html>

Hasilnya seperti ini.

Contoh di atas adalah untuk button normal, setiap button akan memenuhi lebar layar dari kiri hingga ke kanan. Untuk membuat button yang lebarnya sesuai dengan lebar kata, itu disebut dengan inline button.

Inline Button

Perlu diperhatikan bahwa inline button ini tidak berfungsi pada tag input, hanya berfungsi pada tag button dan a. Untuk membuatnya, cukup ditambahkan pada class dengan isi ui-btn-inline pada tag tombol yang digunakan. Misalnya: <a href=“#link” class=“ui-btn ui-btn-inline”>Tombol 3</a>.

Contohnya, silahkan save as file latihan sebelumnya (tentang button) menjadi jqm_button_inline.html, setelah itu sesuaikan isinya dengan kode berikut ini.

  1. <!DOCTYPE html>
  2. <html lang=“ID”>
  3. <head>
  4. <title>Membuat Inline Button</title>
  5. <meta charset=“utf-8”>
  6. <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7. <meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1”>
  9. <link rel=“stylesheet” href=“jquery.mobile-1.4.5.min.css” />
  10. <script src=“jquery-1.11.1.min.js”></script>
  11. <script src=“jquery.mobile-1.4.5.min.js”></script>
  12. </head>
  13. <body>
  15. <div data-role=“page”>
  16. <header data-role=“header”>
  17. <h1>Inline Button</h1>
  18. </header>
  19. <div data-role=“content”>
  20. <p>Tombol 1 tag <b>input</b> tidak bisa untuk inline button. Tombol 2 tag <b>button</b> dan Tombol 3 tag <b>a</b> bisa untuk inline button. Perhatikan bedanya.</p>
  21. <p>
  22. <input type=“button” value=“Tombol 1”>
  23. <button class=“ui-btn ui-btn-inline”>Tombol 2</button>
  24. <a href=“#link” class=“ui-btn ui-btn-inline”>Tombol 3</a>
  25. </p>
  26. </div>
  27. <footer data-role=“footer” data-position=“fixed”>
  28. <h2>banghaji dot com</h2>
  29. </footer>
  30. </div>
  32. </body>
  33. </html>

Jalankan file latihan tersebut, lihat hasilnya.

Grouped Button

Apa itu grouped button? Maksudnya adalah beberapa button atau tombol dijadikan satu atau seakan-akan sebuah button tetapi memiliki bagian dan fungsi tertentu yang berbeda. Untuk membuat grouped button ini perlu menggunakan definisi tag umum dan berisi setidaknya 2 buat atribut khusus. Atribut pertama adalah data-role=”controlgroup” yang digunakan bersamaan dengan atribut data-type=”posisi”. Untuk posisi silahkan dipilih salah satu, horizontal atau vertical.

Contoh, silahkan perhatikan agar lebih mudah paham

  1. <div data-role=“controlgroup” data-type=“horizontal”>
  2. <a href=“#” class=“ui-btn”>Tombol 1</a>
  3. <a href=“#” class=“ui-btn”>Tombol 2</a>
  4. <a href=“#” class=“ui-btn”>Tombol 3</a>
  5. </div>

Jika ingin posisi vertical, tinggal ubah bagian data-type.

Untuk melihat hasilnya, silahkan ketik dan coba kode berikut ini, simpan dengan nama file jqm_button_group.html.

  1. <!DOCTYPE html>
  2. <html lang=“ID”>
  3. <head>
  4. <title>Membuat Grouped Button</title>
  5. <meta charset=“utf-8”>
  6. <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7. <meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1”>
  9. <link rel=“stylesheet” href=“jquery.mobile-1.4.5.min.css” />
  10. <script src=“jquery-1.11.1.min.js”></script>
  11. <script src=“jquery.mobile-1.4.5.min.js”></script>
  12. </head>
  13. <body>
  15. <div data-role=“page”>
  16. <header data-role=“header”>
  17. <h1>Grouped Button</h1>
  18. </header>
  19. <div data-role=“content”>
  20. <p>Tombol grup horizontal.</p>
  21. <div data-role=“controlgroup” data-type=“horizontal”>
  22. <a href=“#” class=“ui-btn”>Buka</a>
  23. <a href=“#” class=“ui-btn”>Simpan</a>
  24. <a href=“#” class=“ui-btn”>Tutup</a>
  25. </div>
  26. <p>Tombol grup vertical.</p>
  27. <div data-role=“controlgroup” data-type=“vertical”>
  28. <a href=“#” class=“ui-btn”>Buka</a>
  29. <a href=“#” class=“ui-btn”>Simpan</a>
  30. <a href=“#” class=“ui-btn”>Tutup</a>
  31. </div>
  32. </div>
  33. <footer data-role=“footer” data-position=“fixed”>
  34. <h2>banghaji dot com</h2>
  35. </footer>
  36. </div>
  38. </body>
  39. </html>

Hasilnya kira-kira seperti gambar di bawah ini.

Oke, kita sudah bahas tutorial tentang bagaimana cara membuat button. Silahkan diterapkan misalnya pada perpindahan halaman pada multiple page, atau sekedar ingin menampilkan popup window, atau lainnya. Selamat mencoba.

Selamat mencoba…

 

Di Edusoft Center Juga Ada Kursus mobile courses lo bisa di cek di http://edusoftcenter.com/course/mobile-courses/

Info Selengkapnya Bisa
Office : 0271 745 2187
No XL : 08180 4542 586 (WA & Telegram Ada)
No Simpati : 082 22922 2121

atau

Bisa Langsung Registrasi Online lewat Formulir Online:
www.edusoftcenter.com

Tags:

Post comment

Your email address will not be published. Required fields are marked *