jQuery Mobile (06): Membuat Button

Ditulis oleh Muhammad Erfan, dipublikasi sejak 4 Februari 2017 pukul 12:18, disimpan dalam kategori jQuery Mobile, Tutorial, Web. Ingin mengomentari tulisan ini? Ada 3 komentar.

Sebelumnya kita sudah bahas dan berikan contoh tentang bagaimana cara membuat popup window, di mana pemicu atau triggernya adalah sebuah link. Kita juga sudah bahas konsep dari popup itu sendiri yang mana bisa berupa single page atau multiple page. Tulisan kali ini akan membahas tentang bagaimana cara membuat button atau tombol menggunakan 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.

<!DOCTYPE html>
<html lang="ID">
<head>
  <title>Membuat Button</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
  <script src="jquery-1.11.1.min.js"></script>
  <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

  <div data-role="page">
    <header data-role="header">
      <h1>Button</h1>
    </header>
    <div data-role="content">
      <p>Tombol 1 tag <b>input</b>, Tombol 2 tag <b>button</b>, Tombol 3 tag <b>a</b>.</p>
      <p>
        <input type="button" value="Tombol 1">
        <button class="ui-btn">Tombol 2</button>
        <a href="#link" class="ui-btn">Tombol 3</a>
      </p>
    </div>
    <footer data-role="footer" data-position="fixed">
      <h2>banghaji dot com</h2>
    </footer>
  </div>

</body>
</html>

Hasilnya seperti ini.

Contoh Button jQuery Mobile

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.

Tinggalkan Balasan 3

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


Arie Pratama

Arie Pratama

Ada No whatsapp yang bisa di hubungin gak yah pak . . Sy agak kesulitan mengenai button nih . . Mohon bantuan nya pak . .

banghaji

banghaji

Silakan kontak melalui akun Telegram atau DM Twitter @banghajidotcom

adilauwba

adilauwba

Sangat Bermanfaat Kak