Sabtu, November 17, 2018

jQuery Mobile (10): Membuat Daftar Menggunakan List View

jQuery Mobile Tutorial Web

Tulisan terakhir saya tentang jQuery Mobile kira-kira 2 bulan lalu, membahas tentang membuat Photo LightBox. Kita lanjutkan dengan bahasan tentang List View. Gunanya untuk apa? Umumnya untuk menampilkan daftar.

Baiklah kita mulai saja. Untuk membuat List View, kita gunakan tag HTML unordered list untuk membuat daftar tidak berurutan, yaitu tag <ul>. Kemudian ditambahkan atribut dari jQuery Mobile seperti ini: data-role="listview". Agar tampilan memiliki margin kanan dan kiri, tambahkan lagi atribut data-inset="true".

Membuat List View

Secara umum contoh penerapannya seperti ini, perhatikan ya karena setelah ini kita langsung coba contohnya secara lengkap. Ingat, kode ini diletakkan di dalam content.

<ul data-role="listview" data-inset="true">
   <li>Ini adalah</li>
   <li>contoh daftar</li>
   <li>menggunakan</li>
   <li>List View</li>
</ul>

Baiklah, kita akan coba membuat List View dengan estimasi dan ekspektasi tampilan seperti gambar berikut. Sebagai info saja, sejak tulisan ini saya tidak menggunakan Ripple Emulator, tetapi langsung dari browser saja.

List View jQuery Mobile

Sebelum mencoba, silakan ketik dulu kode dasarnya, dikopi saja dari tulisan tentang Pengantar Aplikasi Web Mobile. Selanjutnya modifikasi kodenya menjadi seperti berikut ini. Simpan dengan nama file jqm_listview.html.

<html>
<head>
   <title>Membuat List View</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" data-position="fixed">
      <h1>List View</h1>
   </header>
 
   <div data-role="content">
      <p>Kategori Tulisan BangHaji DotCom</p>
      <ul data-role="listview" data-inset="true">
         <li>Adminer</li>
         <li>Android Studio</li>
         <li>CSS</li>
         <li>HTML</li>
         <li>Tutorial</li>
         <li>Database</li>
         <li>Domain & Hosting</li>
         <li>jQuery Mobile</li>
         <li>Kode Praktis</li>
         <li>Video</li>
      </ul>
   </div>
   <footer data-role="footer" data-position="fixed">
      <h2>BangHaji DotCom</h2>
   </footer>
</div>
</body>
</html>

Bagaimana hasilnya? Semoga sama ya 😀

Lanjut?, kita coba tambahkan link pada masing-masing item daftarnya.

Selanjutnya →

Halaman : 1 2 3

Mari sebarkan manfaat kepada orang lain...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *