Jumpa kembali dengan saya Hernowo, di tips dan trik Dumet School. Pada tutorial sebelumnya saya banyak membahas dan praktek tentang jQuery Mobile, kali ini saya akan memberikan tips tentang 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 dalam penggunaannya, jQuery Mobile menyediakan satu set layout kolom berbasis CSS. Dalam pembagian kolom yang disediakan jQuery Mobile ada 5 macam yaitu
- ui-grid-solo memiliki kolom 100% (1 kolom full page) dan untuk menggunakannya dengan memanggil class ui-block-a
- ui-grid-a memiliki kolom 50% / 50% (2 kolom full page) dan untuk menggunakannya dengan memanggil class ui-block-a atau ui-block-b
- ui-grid-b memiliki kolom 33% / 33% / 33%(3 kolom full page) dan untuk menggunakannya dengan memanggil class ui-block-a, ui-block-b, dan ui-block-c
- ui-grid-c memiliki kolom 25% / 25% / 25% / 25% (4 kolom full page) dan untuk menggunakannya dengan memanggil class ui-block-a, ui-block-b, ui-block-c dan ui-block-d
- ui-grid-d memiliki kolom 20% / 20% / 20% / 20% / 20% (5 kolom full page) dan untuk menggunakannya dengan memanggil class ui-block-a, ui-block-b, ui-block-c, ui-block-d dan ui-block-e
Untuk ui-grid disini sebagai parent atau sebagai induknya, kemudian ui-block sebagai childnya dan untuk menggunakan kita harus memanggil keduanya. Baik, di dalam artikel Pengenalan Grid Class Dalam jQuery Mobile ini kita akan praktekkan grid pertama yaitu ui-grid-solo yang berarti satu kolom full page. Teman – teman install terlebih dahulu jQuery Mobile nya atau 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>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h1>Implementasi ui-grid-solo</h1>
</div>
</div>
</body>
</html>
Pastekan pada 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 untuk 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 bisa juga berikan konten apa saja. Jika sudah, save dan jalankan pada browser nya maka hasilnya seperti gambar di bawah ini
Tampilan di atas ini adalah hasil dari ui-grid-solo yang berarti tampilan satu kolom full page, sampai disini implementasi cara menggunakan grid system jQuery Mobile. Kita jumpa kembali pada tips berikutnya yang akan membahas dan praktek tentang tampilan 2, 3, 4, 5 kolom pada jQuery Mobile
Mudah – mudahan di artikel kali ini tentang Pengenalan Grid Class Dalam jQuery Mobile menjadikan teman – teman tambah pengetahuan tentang jQuery Mobile. Jadi sibak terus kelanjutan artikel saya dalam tips dan trik seputar dunia website.
Terimakasih dan Sampai Jumpa Lagi.
Semoga bermanfaat 🙂