GRID JQUERY

Fungsi Grid

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
  
 

Read More