Cara Menggunakan Fungsi Collapsibles jQuery Mobile
Apa kabar teman – teman seluruh, pastinya bagus selalu ya..??
Kembali lagi dengan saya di tips dan trik Source Code Aplikasi, beberapa artikel belakangan ini saya banyak membahas dan cara penggunan jQuery Mobile. Dan di kesempatan kali ini saya akan membahas mengenai Cara Menggunakan Fungsi Collapsibles jQuery Mobile dimana manfaat Collapsibles ini digunakan bagi menyembunyikan atau menampilkan konten, yang bermanfaat bagi menyimpan bagian informasi. Tentu teman – teman tahu mengenai accordion yang bermanfaat bagi merancang sebuah layout seperti fitur, tampilan informasi lainnya di laman. Collapsibles dan accordion hampir sama hasil jadi nya namun implementasinya saja yang berbeda. Di pada jQuery mobile ini kita tinggal memanggil class – class nya seperti kita belajar bootstrap, namun seperti kita tahu di pada jQuery Mobile sedikit berbeda bagi merancang sebuah halaman laman dan kebanyakan memakai data-role yang artinya mendefinisikan isi dari halaman, seperti teks, gambar, tombol, wujud, dll. Di latihan kali ini kita akan merancang sebuah tampilan dengan menggunakan gambar, bagi teman – teman boleh menggunakan text, gambar atau konten apapun yang urgen ada informasinya yang akan kita isikan di dalamnya.
Bagus, saatnya kita implementasikan Cara Menggunakan Fungsi Collapsibles jQuery Mobile. Seperti biasanya teman – teman siapkan text editornya dan install jQuery Mobile nya terlebih dahulu. Dapat kunjungi laman resminya di jQuery.com atau dapat pun seketika 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 bagi merancang 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>
Sekiranya telah, save dan jalankan di browser nya. Karenanya hasilnya seperti gambar di bawah ini
Dapat teman – teman lihat gambar di atas ini jikalau di klik di block hitam atau paket kursus web master karenanya akan memunculkan konten atau menyembunyikan konten
Mirip dengan tampilan accordion pun dapat memunculkan konten atau menyembunyikan konten, berikutnya 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
Sekiranya di klik option karenanya konten akan muncul
Bagaimana..?? Benar-benar gampang bukan..??
Tampilan telah berhasil di bikin khusus tampilan mobile, oke sekianlah di artikel kali ini mengenai Cara Menggunakan Fungsi Collapsibles jQuery Mobile kita jumpa lagi di artikel yang akan datang yang akan selalu membahas seputar dunia laman.
Terimakasih dan hingga jumpa.
Semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
