Kali ini lagi - lagi jQuery akan membantu kita untuk memperindah tampilan website kita, Apa itu jQuery UI? jQuery UI dibuat oleh Paul Bakaus yang bekerja sama dengan stefan Petre untuk menciptakan efek-efek yang canggih dan komponen librari pelengkap jQuery, diantaranya :
- Accordion
- Datepicker
- Tabs
- Dialog
- Progressbar
- Slider
- Effect/animasi
- Drag and Drop
- Dan lain-lain
Baca juga : Program Sederhana Jquery UI Progress Bar
Istalasi jQuery UI
- Download jQuery UI di website resminya yaitu http://jqueryui.com/ kemudian pilih yang stable.
- Extrack file jQuery yang sebelumnya telah di download.
- Untuk mencobanya anda coba klik index.html maka akan terlihat hal - hal apa saja yang dapat dilakukan jQuery
Nah setelah mencoba fitur - fitur yang disediakan jQuery sekarang bagaimana cara menerapkannya ke dalam website?
A. Accordion
Accordion adalah salah satu fitur yang tersedia di jQuery UI, Accordion berfungsi mengelompokan content ke dalam panel - panel yang terpisah di mana pengunjung dapat menutup dan membuka panel - panel tersebut.
Membuat Accordion Standar
Pertama kita buat terlebih dahulu Accordion yang sederhana untuk belajar :
<html>
<head>
<title>Menggunakan Accordion</title>
<link type="text/css" href="jquery-ui-1.9.2.custom/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-ui-1.9.2.custom/development-bundle/jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.accordion.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("#isi").accordion();
});
</script>
</head>
<body style="font-size:65%">
<div id="isi">
<h2>
<a href="#">Web Designer</a></h2>
<div>
Web designer bertugas sebagai juru gambar, yaitu mendesain web</div>
<h2>
<a href="#">Web Programmer</a></h2>
<div>
Web programmer bertugas sebagai juru coding, yaitu melakukan pemrograman website</div>
<h2>
<a href="#">Web Administrator</a></h2>
<div>
Web Administrator bertugassebagai juru maintenance, yaitu melakukan pemeliharaan dan penjagaan website</div>
</div>
</body>
</html>
Ingat letakan file tadi di folder yang sama pada folder jQuery yang telah di download dan di extrac sebelumnya. jika anda melakukan secara benar maka tampilannya akan menjadi seperti ini :
Bagaimana mudah bukan dengan script yang relatif sedikit anda bisa menciptakan menu dropdown dengan mudah. sekarang kita akan menambahkan efek hover.
Efek Hover Accordion
Jika sebelumnya untuk menampilkan menu kita harus mengkliknya sekaran kita akan membuat accordion menampilkan menu jika ada pointer di atasnya agar lebih praktis. ubah script standar sebelumnya menjadi seperti ini :
<html>
<head>
<title>Menggunakan Accordion</title>
<link type="text/css" href="jquery-ui-1.9.2.custom/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-ui-1.9.2.custom/development-bundle/jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.accordion.js"></script>
<script type="text/javascript">
$("document").ready(function(){
//PERUBAHAN HANYA TERJADI DI SINI SELEBIHNYA SAMA
$("#isi").accordion({
event:"mouseover"
});
});
</script>
</head>
<body style="font-size:65%">
<div id="isi">
<h2>
<a href="#">Web Designer</a></h2>
<div>
Web designer bertugas sebagai juru gambar, yaitu mendesain web</div>
<h2>
<a href="#">Web Programmer</a></h2>
<div>
Web programmer bertugas sebagai juru coding, yaitu melakukan pemrograman website</div>
<h2>
<a href="#">Web Administrator</a></h2>
<div>
Web Administrator bertugassebagai juru maintenance, yaitu melakukan pemeliharaan dan penjagaan website</div>
</div>
</body>
</html>
$("document").ready(function(){
$("#isi").accordion({
event:"mouseover"
});
});
Akan tetapi terjadi perubahaan yang menarik. nah sekarang adalah tugas anda untuk mengembangkannya lagi menjadi lebih menarik.
Program Sederhana JQuery UI Accordion anda sekarang sudah selesai, Baca juga tutorial program jQuery lainnya.
0 komentar