Cara Membuat Layout Empat dan Lima Kolom jQuery Mobile

Hallo teman – teman kembali lagi dengan saya Hernowo di tips dan trik Dumet School, pada artikel kali ini kita akan melanjutkan artikel kemarin dimana pembahasan kemarin tentang Belajar Membuat Tampilan Dua Dan Tiga kolom Jquery Mobil. Di latihan kali ini kita akan membahas tentang bagaimana Cara Membuat Layout Empat dan Lima Kolom jQuery Mobile dan saya juga sudah membahas tentang pembagian kolom grid system pada jQuery Mobile. Untuk membuat layout empat kolom dan loma kolom sama seperti kemarin kita pakai ui-grid dan baru kita berikan ui-block untuk pembagian kolomnya. Berikut ini adalah screen shoot yang nanti kita akan implementasikan

Nah bisa teman – teman lihat pada gambar di atas ini nampak sekali layout empat kolom dan lima kolom, sekarang kita akan praktekkan Cara Membuat Layout Empat dan Lima Kolom jQuery Mobile, teman – teman siapkan text editornya lalu install jQuery Mobile nya. Kalian bisa copy script di bawah ini

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

</body>
</html>

Kemudian save terlebih dahulu dengan nama index.html, lalu tambahkan script untuk membuat layout empat kolom dengan memanggil class ui-grid-c dan untuk kolomnya panggil class ui-block-a | b | c | d | e

<p>Layout 4 Kolom</p>
    <div class="ui-grid-c">
      <div class="ui-block-a">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">First Column</a><br>
        <span>Ini adalah kolom 5 dengan menggunakan <i>ui-grid-c</i></span>
      </div>
      <div class="ui-block-b">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">Second Column</a><br>
        <span>Ini adalah kolom 5 dengan menggunakan <i>ui-grid-c</i></span>
      </div>
      <div class="ui-block-c">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">Third Column</a><br>
        <span>Ini adalah kolom 5 dengan menggunakan <i>ui-grid-c</i></span>
      </div>
      <div class="ui-block-d">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">Fourth Column</a><br>
        <span>Ini adalah kolom 5 dengan menggunakan <i>ui-grid-c</i></span>
      </div>  
    </div>

Patekan script di atas ini di dalam tag <body>, jika sudah save dan jalankan pada browser. Maka tampilannya seperti gambar di bawah ini

Langkah berikutnya kita buat layout lima kolom nya, teman – teman bisa copy script di bawah ini

<p>Layout 5 Kolom</p>
    <div class="ui-grid-d">
      <div class="ui-block-a">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">First Column</a><br>
        <span>Ini adalah kolom 5 dengan menggunakan <i>ui-grid-d</i></span>
      </div>
      <div class="ui-block-b">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">Second Column</a><br>
        <span>Ini adalah kolom 5 dengan menggunakan <i>ui-grid-d</i></span>
      </div>
      <div class="ui-block-c">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">Third Column</a><br>
        <span>Ini adalah kolom 5 dengan menggunakan <i>ui-grid-d</i></span>
      </div>
      <div class="ui-block-d">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">Fourth Column</a><br>
        <span>Ini adalah kolom 5 dengan menggunakan <i>ui-grid-e</i></span>
      </div>  
      <div class="ui-block-e">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">Fifth Column</a><br>
        <span>Ini adalah kolom 5 dengan menggunakan <i>ui-grid-d</i></span>
      </div>

Tidak jauh berbeda dengan empat kolom kita tinggal mengganti saja type class nya

Teman – teman tambahkan script lima kolomnya, jika sudah save dan refresh browser nya. Maka hasilnya seperti di bawah ini

Bagaimana, mudah sekali bukan..??

Kalian kembangkan lagi dari latihan kali ini supaya makin mengerti tentang membuat layout dengan menggunakan jQuery Mobile, baik sekian pada artikel kali ini tentang Cara Membuat Layout Empat dan Lima Kolom jQuery Mobile kita jumpa kembali pada tips dan trik berikutnya.

Terima Kasih dan Sampai Jumpa

Semoga bermanfaat 🙂

Cara Membuat Layout Empat dan Lima Kolom jQuery Mobile

Kategori