Skip to main content

User Interface Widget jquery mobile pemula

Mengenal User Interface jquery mobile

User interface (UI) adalah bentuk tampilan sebuah halaman aplikasi. Bagusnya sebuah aplikasi tergantung dari UI nya. kalau dikatakan, UI sangat berpengaruh sekali untuk sebuah aplikasi. jquery mobile menyediakan ragam UI yang bisa kita gunakan secara mudah dan pastinya simpel.

Pembahasan pertama untuk User Interface jquery mobile kita fokuskan dulu pada UI Widget menggunakan List View, Button dan Form.

User Interface Page dan List View

Bagi pengguna aplikasi mobile pastinya sering menemukan tampilan seperti gambar berikut :

User Interface List View
User Interface List View

Dengan menggunakan jquery mobile, kita dapat dengan mudah mendesain User Interface tersebut, yaitu dengan menggunakan list view. kita langsung mulai saja cara pembuatan nya menggunakan jquery mobile.

note : Source code ini merupakan lanjutan dari aplikasi sebelumnya.

baca : Pemula jquery mobile

Tambahkan source code berikut :


<html>
<head>
<title>
Dasar jquery mobile
</title>
<meta charset="utf-8">
<!-- viewport Digunakan -> untuk zoom tampilan di browser smartphone kita.
X-UA-Compatible —> Untuk mengecek compabilitas perangkat yang digunakan. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Memanggil Script jQuery secara Online -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- buat halaman, inisialisasi sebagai id = home -->
<div data-role="page" id="home">
<!-- buat Header -->
<header data-role="header">
<h1>Desain UI Aplikasi</h1>
</header>
<!-- buat Content -->
<div data-role="content">
<!-- panggil class list view -->
<div class="choice_list">
<h2>Pilihan Menu</h2>
<!-- Deklarasikan list view -->
<ul data-role="listview" data-inset="true">
<!-- Buatkan daftar pilihan sesuai kebutuhan, efek transisi disini kita set="slidedown",
kita bisa mengubah efek transisi sesuai kebutuhan -->
<li><a href="" data-transition="slidedown"><h3>Tambah Data</h3></a></li>
<li><a href="" data-transition="slidedown"><h3>Tampil Data</h3></a></li>
<li><a href="" data-transition="slidedown"><h3>Ubah Data</h3></a></li>
<li><a href="" data-transition="slidedown"><h3>Hapus Data</h3></a></li>
</ul>
</div>
</div>
<!-- buat Footer-->
<footer data-role="footer">
<h2>http://blogciqwan.com</h2>
</footer>
</div>
</body>
</html>

Ada tiga atribut penting pada kode diatas, pertama “page”, “header”, “content” dan “listview”.  Atribut data-inset=”true” menyatakan bentuk listview, jika ini dihilangkan maka listview akan berbentuk kotak tidak bersudut.

Hasil dari source code tersebut adalah :

User Interface jquery mobile
List View UI

User Interface menggunakan list view yang telah kita buat bisa disesuaikan tampilan nya sesuai kebutuhan. seperti contoh :

menambahkan icon di setiap urutan list nya :

tambahkan kode berikut :


<li><a href="" data-transition="slidedown"><img src="img/add.png" width="50" height="50"><h3>Tambah Data</h3></a></li>
<li><a href="" data-transition="slidedown"><img src="img/tampil.png" width="50" height="50"><h3>Tampil Data</h3></a></li>
<li><a href="" data-transition="slidedown"><img src="img/ubah.jpg" width="50" height="50"><h3>Ubah Data</h3></a></li>
<li><a href="" data-transition="slidedown"><img src="img/remove.png" width="50" height="50"><h3>Hapus Data</h3></a></li>

Sehingga tampilan menjadi berikut :

Icon Image List View
Icon Image List View

Note : Pastikan kita telah membuat sebuah folder “img” untuk simpan icon gambar yang diperlukan.

Penyesuain user interface selanjutnya untuk list view, kita menambahkan text dibawah setiap list :

</p>
<p style="text-align: justify;"><li><a href="" data-transition="slidedown"><img src="img/add.png" width="50" height="50"><h2>Tambah Data</h2><p>Menu Ubah Data</p></a></li>
<li><a href="" data-transition="slidedown"><img src="img/tampil.png" width="50" height="50"><h2>Tampil Data</h2><p>Menu Tampil Data</p></a></li>
<li><a href="" data-transition="slidedown"><img src="img/ubah.jpg" width="50" height="50"><h2>Ubah Data</h2><p>Menu Ubah Data</p></a></li>
<li><a href="" data-transition="slidedown"><img src="img/remove.png" width="50" height="50"><h2>Hapus Data</h2><p>Menu Hapus Data</p></a></li></p>
<p style="text-align: justify;">

hasilnya :

List View UI
List View UI

Demikian tentang penerapan List View pada jquery mobile untuk mendesain user interface. Materi ini masih bersambung ke bagian berikutnya, yaitu dalam hal mendesain User Interface dengan menambahkan Button dan Form. Setelah bagian pertama dalam User Interface ini kita selesaikan barulah kita akan buatkan video nya untuk pemahaman yang lebih mudah.

Bersambung…….!

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com