Untuk membuat button pada jQuery Mobile , bisa dilakukan dengan 3 cara. Yaitu menggunakan tag <input > atau <button > ...
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 jqmbutton.html.
- <!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 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.
COMMENTS