Mobile Web App 5 – List View

JQM menyediakan komponen berupa listview yang memiliki tampilan seperti listview yang sering ditemui pada aplikasi mobile.

Listview bisa digunakan untuk menampilkan tag ul seperti berikut ini.

See the Pen List View by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.

Secara struktur listview berada di bagian kontent dari sebuah page. Markup HTML yang digunakan adalah ul dengan atribute data-role="listview"

      <ul data-role="listview">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>

listview juga akan otomatis memproses link yang berada pada listview menjadi sebuah item yang memiliki arrow seperti berikut ini

See the Pen List View with Links by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.

listview juga memiliki fitur padding otomatis dengan mengaktifkan atribute data-inset="true" seperti berikut ini

See the Pen List View Inset by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.

listview juga memiliki fasilitas list divider dengan menambahkan atribute data-role="list-divider" pada item yang diinginkan seperti berikut ini

Leave a Reply