Pengenalan Grid Class Dalam jQuery Mobile
Jumpa kembali dengan saya Hernowo, di tips dan trik Source Code Aplikasi. Di panduan sebelumnya saya banyak membahas dan praktek mengenai jQuery Mobile, kali ini saya akan memberikan tips mengenai Pengenalan Grid Class Dalam jQuery Mobile. Seperti yang kita tahu banyak framework css dan html seperti bootstrap, materialize dan framework lainnya. Namun berbeda – beda cara pemakaiannya pada penggunaannya, jQuery Mobile menyediakan satu set layout kolom dengan menggunakan CSS. Pada pembagian kolom yang disediakan jQuery Mobile ada 5 macam yaitu
- ui-grid-solo mempunyai kolom 100% (1 kolom full page) dan bagi menggunakannya dengan memanggil class ui-block-a
- ui-grid-a mempunyai kolom 50% / 50% (2 kolom full page) dan bagi menggunakannya dengan memanggil class ui-block-a atau ui-block-b
- ui-grid-b mempunyai kolom 33% / 33% / 33%(3 kolom full page) dan bagi menggunakannya dengan memanggil class ui-block-a, ui-block-b, dan ui-block-c
- ui-grid-c mempunyai kolom 25% / 25% / 25% / 25% (4 kolom full page) dan bagi menggunakannya dengan memanggil class ui-block-a, ui-block-b, ui-block-c dan ui-block-d
- ui-grid-d mempunyai kolom 20% / 20% / 20% / 20% / 20% (5 kolom full page) dan bagi menggunakannya dengan memanggil class ui-block-a, ui-block-b, ui-block-c, ui-block-d dan ui-block-e
Bagi ui-grid disini selaku parent atau selaku induknya, kemudian ui-block selaku childnya dan bagi menggunakan kita mesti memanggil keduanya. Bagus, di pada artikel Pengenalan Grid Class Dalam jQuery Mobile ini kita akan praktekkan grid pertama-tama yaitu ui-grid-solo yang berarti satu kolom full page. Teman – teman install terlebih dahulu jQuery Mobile nya atau 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>
<div data-role=page id=pageone>
<div data-role=main class=ui-content>
<h1>Implementasi ui-grid-solo</h1>
</div>
</div>
</body>
</html>
Pastekan di text editornya dan save dengan index.html, kemudian kita panggil class grid nya
Teman – teman tambahkan script seperti gambar di atas ini yang saya beri kotak berwarna merah, yang berarti bagi satu kolom full page. Baru kita berikan kontennya di dalamnya disini saya memberikan konten button dan paragraf
Kalian isikan konten seperti gambar di atas ini yang saya beri kotak berwarna orange atau dapat pun berikan konten apa saja. Sekiranya telah, save dan jalankan di browser nya karenanya hasilnya seperti gambar di bawah ini
Tampilan di atas ini yakni hasil dari ui-grid-solo yang berarti tampilan satu kolom full page, hingga disini implementasi cara menggunakan grid system jQuery Mobile. Kita jumpa kembali di tips berikutnya yang akan membahas dan praktek mengenai tampilan 2, 3, 4, 5 kolom di jQuery Mobile
Gampang – mudahan di artikel kali ini mengenai Pengenalan Grid Class Dalam jQuery Mobile menjadikan teman – teman tambah pengetahuan mengenai jQuery Mobile. Jadi sibak terus kelanjutan artikel saya pada tips dan trik seputar dunia situs.
Terimakasih dan Hingga Jumpa Lagi.
Semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
