Belajar Membuat Tampilan Dua Dan Tiga kolom Jquery Mobile

Di artikel kali ini saya akan memberikan tips kepada teman – teman mengenai Belajar Membuat Tampilan Dua Dan Tiga kolom Jquery Mobile, dan sebelumnya kita telah membahas apa itu grid dan type class bagi merancang sebuah kolom dengan menggunakan grid system. Teman – teman dapat lihat artikel kemaren mengenai Pengenalan Grid Class Dalam jQuery Mobile

Bagi penjelasannya semuanya ada di artikel kemarin, dan kali ini saya hanya akan melanjutkan latihan kemarin. Mengenai menggunakan dua kolom dan tiga kolom di pada jQuery Mobile. Kali ini kita akan menggunakan ui-grid-a dan ui-grid-b bagi merancang pembelahan kolom. Berikut ini nanti yang akan kita bikin bagi tampilannya

Bagus, mari kita seketika 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>

Sekiranya telah, save dan jalankan di browser nya. Karenanya hasilnya seperti di bawah ini

Kemudian kita tambahkan lagi bagi 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>

Sekiranya telah save dan refresh browser nya, karenanya tampilan 3 kolom telah berhasil di bikin

Seperti yang teman – teman lihat di hasil tampilan dua kolom dan tiga kolom mempunyai class yang berbeda – beda bagi pemanggilannya seperti halnya kita menggunakan framework lainnya. Di pada jQuery Mobile ini bagi merancang sebuah kolom yang sangat terpenting mesti berikan type – type nya

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

Bagaimana, lumayan gampang bukan..??

Demikian di artikel kali ini mengenai Belajar Membuat Tampilan Dua Dan Tiga kolom Jquery Mobile kita jumpa kembali di artikel yang akan datang yang akan membahas mengenai merancang situs 4 kolom dan lima kolom dengan jQuery Mobile.

Semoga bermanfaat, Terima Kasih dan Hingga Jumpa

Sumber https://kursuswebsite.org