Cara Membuat Layout Empat dan Lima Kolom jQuery Mobile
Hallo teman – teman kembali lagi dengan saya Hernowo di tips dan trik Source Code Aplikasi, di artikel kali ini kita akan melanjutkan artikel kemarin dimana pembahasan kemarin mengenai Belajar Membuat Tampilan Dua Dan Tiga kolom Jquery Mobil. Di latihan kali ini kita akan membahas mengenai bagaimana Cara Membuat Layout Empat dan Lima Kolom jQuery Mobile dan saya pun telah membahas mengenai pembagian kolom grid system di jQuery Mobile. Bagi merancang layout empat kolom dan loma kolom sama seperti kemarin kita gunakan ui-grid dan baru kita berikan ui-block bagi pembagian kolomnya. Berikut ini yaitu screen shoot yang nanti kita akan implementasikan
Nah dapat teman – teman lihat di gambar di atas ini nampak sekali layout empat kolom dan lima kolom, sekarang ini kita akan praktekkan Cara Membuat Layout Empat dan Lima Kolom jQuery Mobile, teman – teman siapkan text editornya lalu install jQuery Mobile nya. Kalian dapat 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 bagi merancang layout empat kolom dengan memanggil class ui-grid-c dan bagi 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 yaitu 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 yaitu 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 yaitu 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 yaitu kolom 5 dengan menggunakan <i>ui-grid-c</i></span>
</div>
</div>
Patekan script di atas ini di pada tag <body>, sekiranya telah save dan jalankan di browser. Karenanya tampilannya seperti gambar di bawah ini
Langkah berikutnya kita bikin layout lima kolom nya, teman – teman dapat 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 yaitu 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 yaitu 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 yaitu 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 yaitu 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 yaitu kolom 5 dengan menggunakan <i>ui-grid-d</i></span>
</div>
Tak jauh berbeda dengan empat kolom kita tinggal mengganti saja type class nya
Teman – teman tambahkan script lima kolomnya, sekiranya telah save dan refresh browser nya. Karenanya hasilnya seperti di bawah ini
Bagaimana, gampang sekali bukan..??
Kalian kembangkan lagi dari latihan kali ini supaya makin paham mengenai merancang layout dengan menggunakan jQuery Mobile, bagus demikian di artikel kali ini mengenai Cara Membuat Layout Empat dan Lima Kolom jQuery Mobile kita jumpa kembali di tips dan trik berikutnya.
Terima Kasih dan Hingga Jumpa
Semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
