Jquery
Mobile menyediakan satu set berbasis CSS kolom layout. Namun, layout kolom
umumnya tidak dianjurkan pada perangkat
mobile karena lebar layar mobile. Tapi ada saat saat ketika kita menginginkan
posisi elemen yang lebih kecil, seperti tombol atau tab navigasi berdampingan
seperti dalam sebuah tabel. Maka kolom layout menjadi solusi membuat tampilan
layar mobile yang berbeda.
—Lebar kolom didalam sebuah grid
sama dengan 100% tanpa perbatasan, latarbelakang, margin atau padding.
Ada 5 grid yang dapat digunakan yaitu:
Pembagian Grid Pada Fungsinya
Keterangan
dari grid diatas
—Grid
class mendefinisikan elemen grid container.
—Corresponds
merupakan clild class untuk membuat lebar kolom.
contoh
:
untuk
membuat 5 kolom(20% / 20%) maka kita akan membuat elemen container dengan class
ul-grid-d kemudian diikuti dengan elemen class ul-block-a untuk kolom pertama dan class ul-block-b untuk kolom ke 2.
dan
class
ul-block-c untuk kolom ke 3
dan
class
ul-block-d untuk kolom ke 4
dan
class
ul-block-e untuk kolom ke 5
Coding
—<h1>Header</h1>
— <nav
data-role="navbar" class="ui-navbar"
role="navigation">
— <ul class="ui-grid-c"
data-positin="fixed">
— <li
class="ui-block-a"><a href="#home"
data-rel="dialog" data-icon="home" class="ui-link
ui-btn ui-icon-home ui-btn-icon-top">Home</a></li>
— <li
class="ui-block-b"><a href="#email"
data-rel="dialog" data-icon="grid" class="ui-link
ui-btn ui-icon-grid ui-btn-icon-top">Email</a></li>
— <li
class="ui-block-c"><a href="register.php"
data-rel="dialog" data-icon="search" class="ui-link
ui-btn ui-icon-search ui-btn-icon-top">Register</a></li>
— <li
class="ui-block-d"><a href="#calendar"
data-rel="dialog" data-icon="calendar" class="ui-link
ui-btn ui-icon-calendar ui-btn-icon-top">Calendar</a></li>
— </ul>
— </nav>
— </div>
— <div
data-role="main" class="ui-content">
— <p>Mata
Kuliah Semester 5 B </p>
— <div
class = "ui-grid-d">
— <div
class="ui-block-d">
— <a
href ="#"class="ui-btn ui-corner-all ui-shadow">
Hardware Dasar </a><br>
— <span>
Ahmad Basar. Matakuliah ini menjelaskan tentang hardware komputer.
</span>
— </div>
— <div
class="ui-block-b">
— <a
href ="#"class="ui-btn ui-corner-all ui-shadow">
Jaringan WEB </a><br>
— <span>
Indra Gunawan. Membuat dan mendesain sebuah web. Laporan Class B sudah selesai.
</span>
— </div>
— <div
class="ui-block-c">
— <a
href ="#"class="ui-btn ui-corner-all ui-shadow">
Jaringan Mobile </a><br>
— <span>
M. Ropianto . Matakuliah merancang sebuah aplikasi deng jquerymobile. Beliau
juga Kaprodi. </span>
— </div>
— <div
class="ui-block-d">
— <a
href ="#"class="ui-btn ui-corner-all ui-shadow">
Pengantar Akuntansi </a><br>
— <span>
M. Sapuan. Beliau Dosen dari univ STIE Ibnusina. </span>
— </div>
— <div
class="ui-block-e">
— <a
href ="#"class="ui-btn ui-corner-all ui-shadow"> Lab
</a><br>
— <span>
Okta Veza . Ketua dari Labor, Di teknik INF. </span>
Run Via Laptop Atau PC
Run Via Handphone Portrait
Landscape
0 komentar:
Posting Komentar