Kamis, 12 Juni 2014
0 komentar

Membuat Listview di jQuery Mobile



Kali ini kita akan membahas bagaimana membuat listview di jQuery Mobile, ada beberapa contoh membuat listview di jQuery Mobile.
1. Contoh Pertama :

<ul data-role="listview">
                    <li>Google+</li>
                    <li>Facebook</li>
                    <li>Twitter</li>
</ul>
Jalankan emulator / browser anda, maka akan tampil seperti dibawah ini :


2. Contoh Kedua :

<ol data-role="listview">
    <li>Google+</li>
    <li>Facebook</li>
    <li>Twitter</li>
</ol>
Hasilnya akan seperti gambar dibawah ini :

3. Contoh Ketiga :

<ul data-role="listview">
    <li><a href="https://plus.google.com">Google+</a></li>
    <li><a href="https://www.facebook.com/">Facebook</a></li>
    <li><a href="https://twitter.com/">Twitter</a></li>
</ul>
Contoh ketiga listview dengan link tanpa data-inset hasilnya seperti dibawah ini :


4. Contoh Keempat :

<ul data-role="listview" data-inset="true">
    <li><a href="https://plus.google.com">Google+</a></li>
    <li><a href="https://www.facebook.com/">Facebook</a></li>
    <li><a href="https://twitter.com/">Twitter</a></li>
</ul>
Pada contoh keempat yaitu dengan menggunakan data-inset, yang hasilnya bisa dilihat dibawah ini :


5. Contoh Kelima :

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Social Media..." data-inset="true">
    <li><a href="https://plus.google.com">Google+</a></li>
    <li><a href="https://www.facebook.com/">Facebook</a></li>
    <li><a href="https://twitter.com/">Twitter</a></li>
</ul>

Pada Contoh kelima terdapat pambaha menu filter data, seperti gambar dibawah ini :


6. Contoh Keenam :

<ul data-role="listview" data-inset="true" data-divider-theme="a">
    <li data-role="list-divider">Social Media</li>
    <li><a href="https://plus.google.com">Google+</a></li>
    <li><a href="https://www.facebook.com/">Facebook</a></li>
    <li><a href="https://twitter.com/">Twitter</a></li>
    <li data-role="list-divider">Browser</li>
    <li><a href="https://www.google.com/chrome/browser/">Google Chrome</a></li>
    <li><a href="http://www.mozilla.org/id/firefox/new/">Firefox</a></li>
    <li><a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a></li>
</ul>

Pada contoh keenam adalah listview yang menggunakan list-divider untuk membatasi antar kontent, seperti gambar dibaawh ini :

7. Contoh Ketujuh :

<ul data-role="listview" data-count-theme="b" data-inset="true">
    <li><a href="#">Inbox <span class="ui-li-count">12</span></a></li>
    <li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
    <li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
    <li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
    <li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
</ul>

Akan tampil seperti dibawah ini :


8. Contoh Kedelapan :

<ul data-role="listview" data-inset="true">
    <li><a href="#">
            <img src="album-bb.jpg">
            <h2>Broken Bells</h2>
            <p>Broken Bells</p></a>
    </li>
    <li><a href="#">
            <img src="album-hc.jpg">
            <h2>Warning</h2>
            <p>Hot Chip</p></a>
    </li>
    <li><a href="#">
            <img src="album-p.jpg">
            <h2>Wolfgang Amadeus Phoenix</h2>
            <p>Phoenix</p></a>
    </li>
</ul>

Contoh kedelapan listview dengan image, akan tampil seperti dibawah ini :


 
Toggle Footer
Top