Belajar Membuat Tampilan Dua Dan Tiga kolom Jquery Mobile

Pada artikel kali ini saya akan memberikan tips kepada teman – teman tentang Belajar Membuat Tampilan Dua Dan Tiga kolom Jquery Mobile, dan sebelumnya kita sudah membahas apa itu grid dan type class untuk membuat sebuah kolom dengan menggunakan grid system. Teman – teman bisa lihat artikel kemaren tentang Pengenalan Grid Class Dalam jQuery Mobile

Untuk penjelasannya semuanya ada di artikel kemarin, dan kali ini saya hanya akan melanjutkan latihan kemarin. Tentang menggunakan dua kolom dan tiga kolom di dalam jQuery Mobile. Kali ini kita akan menggunakan ui-grid-a dan ui-grid-b untuk membuat pembelahan kolom. Berikut ini nanti yang akan kita buat untuk tampilannya

Baik, mari kita langsung implementasikan Belajar Membuat Tampilan Dua Dan Tiga kolom Jquery Mobile sebelumnya teman – teman siapkan file atau install terlebih dahulu jQuery Mobile nya. Kemudian teman – teman berikan script di bawah ini

<h1>Tampilan 2 Kolom (ui-grid-a)</h1>
    <div class="ui-grid-a">
      <div class="ui-block-a">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">kolom no 1</a>
        <p>implementasi ui-grid-a kolom no 1</p>
      </div>
      <div class="ui-block-b">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">kolom no 2</a>
        <p>implementasi ui-grid-a kolom no 2</p>
      </div>
    </div>

Jika sudah, save dan jalankan pada browser nya. Maka hasilnya seperti di bawah ini

Kemudian kita tambahkan lagi untuk tiga kolom nya

<h1>Tampilan 3 Kolom (ui-grid-b)</h1>
    <div class="ui-grid-b">
      <div class="ui-block-a">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">kolom no 1</a>
        <p>implementasi ui-grid-b kolom no 1</p>
      </div>

      <div class="ui-block-b">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">kolom no 2</a>
        <p>implementasi ui-grid-b kolom no 2</p>
      </div>

      <div class="ui-block-c">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">kolom no 3</a>
        <p>implementasi ui-grid-b kolom no 3</p>
      </div>
    </div>

Jika sudah save dan refresh browser nya, maka tampilan 3 kolom sudah berhasil di buat

Seperti yang teman – teman lihat pada hasil tampilan dua kolom dan tiga kolom memiliki class yang berbeda – beda untuk pemanggilannya seperti halnya kita menggunakan framework lainnya. Di dalam jQuery Mobile ini untuk membuat sebuah kolom yang paling terpenting harus berikan type – type nya

Seperti latihan kali ini membuat dua kolom dan tiga kolom berarti menggunakan ui-grid-a dan ui-grid-b, atau bisa listnya pada gambar di atas ini.

Bagaimana, cukup mudah bukan..??

Sekian pada artikel kali ini tentang Belajar Membuat Tampilan Dua Dan Tiga kolom Jquery Mobile kita jumpa kembali di artikel yang akan datang yang akan membahas tentang membuat website 4 kolom dan lima kolom dengan jQuery Mobile.

Semoga bermanfaat, Terima Kasih dan Sampai Jumpa