Cara Menggunakan Fungsi Collapsibles jQuery Mobile

Apa kabar teman – teman semua, tentunya baik selalu ya..??

Kembali lagi dengan saya pada tips dan trik Dumet School, beberapa artikel belakangan ini saya banyak membahas dan cara penggunan jQuery Mobile. Dan pada kesempatan kali ini saya akan membahas tentang Cara Menggunakan Fungsi Collapsibles jQuery Mobile dimana fungsi Collapsibles ini digunakan untuk menyembunyikan atau menampilkan konten, yang berguna untuk menyimpan bagian informasi. Tentu teman – teman tahu tentang accordion yang berguna untuk membuat sebuah layout seperti menu, tampilan informasi lainnya pada website. Collapsibles dan accordion hampir sama hasil jadi nya namun implementasinya saja yang berbeda. Di dalam jQuery mobile ini kita tinggal memanggil class – class nya seperti kita belajar bootstrap, namun seperti kita tahu di dalam jQuery Mobile sedikit berbeda untuk membuat sebuah halaman website dan kebanyakan memakai data-role yang artinya mendefinisikan isi dari halaman, seperti teks, gambar, tombol, bentuk, dll. Pada latihan kali ini kita akan membuat sebuah tampilan dengan menggunakan gambar, untuk teman – teman boleh menggunakan text, gambar atau konten apapun yang penting ada informasinya yang akan kita isikan di dalamnya.

Baik, saatnya kita implementasikan Cara Menggunakan Fungsi Collapsibles jQuery Mobile. Seperti biasa teman – teman siapkan text editornya dan install jQuery Mobile nya terlebih dahulu. Bisa kunjungi website resminya di jQuery.com atau bisa juga langsung teman – teman copy script di bawah ini

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  
</body>
</html>

Dan save dengan nama index.html, kemudian baru kita berikan script untuk membuat halaman websitenya

<div data-role="page" id="pageone" >
  <div data-role="header" class="ui-content">
    <h1>Logo</h1>
  </div>

  <div data-role="main" class="ui-content">
  <h1>Accourdion Information</h1>
    <div data-role="collapsible-set" data-theme="b" data-content-theme="a">
      <div data-role="collapsible" data-collapsed="false">
        <h3 class="flip">Paket Kursus Web Master</h3>
        <img src="wm.jpg" style="width: 100%">
      </div>
    </div>
  </div>

  <div data-role="header" class="ui-content">
  <div data-role="footer" >
    <h1>Footer</h1>
  </div>

Jika sudah, save dan jalankan pada browser nya. Maka hasilnya seperti gambar di bawah ini

Bisa teman – teman lihat gambar di atas ini jika di klik pada block hitam atau paket kursus web master maka akan memunculkan konten atau menyembunyikan konten

Mirip dengan tampilan accordion juga dapat memunculkan konten atau menyembunyikan konten, selanjutnya kita tambahkan lagi script nya

    <div data-role="collapsible">
        <h3 class="flip">Paket Kursus Web Design</h3>
        <img src="wd.jpg" style="width: 100%">
      </div>
      <div data-role="collapsible">
        <h3 class="flip">Paket Kursus Grafik Design</h3>
        <img src="gd.jpg" style="width: 100%">
      </div>
      <div data-role="collapsible">
        <h3 class="flip">Paket Kursus Web Programming</h3>
        <img src="wp.jpg" style="width: 100%">
      </div>
      <div data-role="collapsible">
        <h3 class="flip">Paket Kursus Digital Marketing</h3>
        <img src="dm.jpg" style="width: 100%">
      </div>

Hingga menghasilkan seperti gambar di bawah ini

Jika di klik option maka konten akan muncul

Bagaimana..?? Sangat mudah bukan..??

Tampilan sudah berhasil di buat khusus tampilan mobile, oke sekian pada artikel kali ini tentang Cara Menggunakan Fungsi Collapsibles jQuery Mobile kita jumpa lagi pada artikel yang akan datang yang akan selalu membahas seputar dunia website.

Terimakasih dan sampai jumpa.

Semoga bermanfaat 🙂

Cara Menggunakan Fungsi Collapsibles jQuery Mobile

Kategori