Pertemuan 3 Web Mobile (JQuery)

MEMBUAT TOMBOL BUTTON DAN LINK MULTIPLE PAGE
Sebuah button di jQuery Mobile dapat dibuat dengan tiga cara :

1. Menggunakan element <input>
<input type="button" value="Button">
2. Menggunakan element <button> dengan class = “ui-button”
<button class="ui-btn">Button</button>
3. Menggunakan element <a> dengan class = “ui-button”
<a href="#anylink" class="ui-btn"> Button </a>
Disarankan untuk menggunakan elemen <a> dengan class="ui-btn" untuk link antar halaman, dan
elemen <input> atau <button> untuk pengiriman formulir. Untuk mempelajari tentang penggunaan ketiga
tag dalam pembuatan button tersebut, ketikkan script untuk membuat button berikut.
<html>
<head>
<title>Membuat Button</title>
<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>Pembuatan Button</h1>
</header>
<div data-role="content">
<p>Sebuah button di jQuery Mobile dapat dibuat dengan tiga cara,
yaitu : </p>
<ol start="1" type="1">
<li>Menggunakan element <b><input></b> </li>
<li>Menggunakan element <b><button></b> </li>
<li>Menggunakan element <b><a></b></li>
</ol>
<p>Tombol 1 menggunakan tag <b>input</b>, Tombol 2 menggunakan tag <b>button</b>, Tombol 3

menggunakan 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>Lab. Komputer</h2>
</footer>
</div>
</body>
</html>
Inline Button
Secara default, button dapat mengambil layar lebar penuh. Jika kita ingin button hanya selebar isinya, atau
jika ingin dua atau lebih buttons untuk tampil berdampingan, tambahkan "ui-btn-inline" class.
<html>
<head>
<title>Membuat Inline Button</title>

</head>
<body>
<h1>Inline Button</h1>
</header>
<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>
<p>
<input type="button" value="Tombol 1">
<button class="ui-btn ui-btn-inline">Tombol 2</button>
<a href="#link" class="ui-btn ui-btn-inline">Tombol 3</a>
</p>
</div>
</footer>
</div>
</body>
</html>
Link Multiple Page dengan Button

Untuk menghubungkan antara page (halaman) dalam 1 file dengan button, gunakan elemen <a> dengan class =
"ui-btn", misalnya dari page 1 menuju ke page 2. Maka digunakan perintah :
<a href=”#page2” class=”ui-btn”>Next Page 2 </a>
Grouped Button
jQuery Mobile menyediakan cara mudah untuk mengelompokkan button bersama-sama, yaitu : menggunakan
data-role="controlgroup" atribut bersama-sama dengan data-type="horizontal | vertikal" dalam elemen
kontainer, untuk menentukan apakah group button tersebut horizontal atau vertikal.
<html>
<head>
<title>Membuat Group Button</title>

</head>
<body>
<h1>Group Button</h1>
</header>
<p>Tombol grup horizontal.</p>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn">Buka</a>
<a href="#" class="ui-btn">Simpan</a>
<a href="#" class="ui-btn">Tutup</a>
</div>
<p>Tombol grup vertical.</p>
<div data-role="controlgroup" data-type="vertical">
<a href="#" class="ui-btn">Buka</a>
<a href="#" class="ui-btn">Simpan</a>
<a href="#" class="ui-btn">Tutup</a>
</div>
</div>
</footer>
</div>
</body>
</html>
Secara default, grouped button dikelompokkan secara vertikal tanpa margin dan ruang antaranya. Hanya button
yang pertama dan button 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”
Soal Latihan 1
Buatlah WEB Mobile tentang penggunaan Button dan Link, untuk menampilkan data Identitas Mahasiswa
yang berisi halaman MENU UTAMA, dan Sub Menu Biodata, Pendidikan, Orang Tua.
1. Sub Menu Biodata (berisi biodata mahasiswa mulai dari : Nama, NIM, Jurusan, Kelas, Alamat, WA, dsb)
2. Sub Menu Pendidikan (berisi pendidikan mahasiswa mulai dari : TK, SD, SMP, SMA, Perguruan Tinggi,
sertakan Tahun Masuk dan Tahun Keluar dari masing-masing jenjang pendidikan)
3. Sub Menu Orang Tua/Wali (berisi data orang tua mahasiswa mulai dari : Nama Ayah, Nama Ibu,
Alamat, Pekerjaan dsb).
4. Untuk membuat Link gunakan button dengan elemen <a>, dan Grouped Button. Tambahkan efek
animasi untuk setiap perpindahan antar page.
MENU UTAMA
BIODATA
PENDIDIKAN
ORANG TUA / WALI
LAB KOMPUTER
Soal Tugas (di Share Ke Group paling lambat hari Kamis berisi Tampilan dan Listing Program)
Buatlah WEB Mobile dengan kasus anda tentukan sendiri, mengenai penggunaan Link (Minimal 6 Page
dalam 1 File) dan Button (gunakan elemen <a> dan grouped button). Page 1 berisi menu utama dan
page terakhir berisi identitas anda. Tambahkan efek animasi untuk setiap perpindahan antar page.

Pertemuan 3 Web Mobile (JQuery)

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pertemuan 3 Web Mobile (JQuery)

Diunggah oleh

Hak Cipta:

Format Tersedia

MEMBUAT TOMBOL BUTTON DAN LINK MULTIPLE PAGE

Sebuah button di jQuery Mobile dapat dibuat dengan tiga cara :

<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />

<p>Tombol 1 menggunakan tag <b>input</b>, Tombol 2 menggunakan tag <b>button</b>, Tombol 3

<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />

Link Multiple Page dengan Button

<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />

Class Penjelasan Contoh

ui-btn-b Mengubah warna tombol untuk latar belakang hitam

ui-corner-all Menambah sudut bulat pada button.

ui-mini Membuat ukuran button lebih kecil.

ORANG TUA / WALI

Anda mungkin juga menyukai