Accordion pada JQuery berfungsi untuk mengelompokkan content dalam panel-panel yang terpisah, dimana pengunjung dapat membuka dan menutup panel-panel yang diinginkan. Disamping itu, accordion juga bisa untuk mengelompokkan menu-menu yang sejenis.
Berikut contoh penggunaan Accordion
<html>
<head>
<title>Menggunakan Accordion</title>
<link type=text/css" href="jquery.ui.all.css" rel ="stylesheet" />
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.accordion.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("#isi").accordion();
});
</script>
<body>
<div id="isi">
<h2><a href="#">Kelompok Pertama</a></h2>
<div>Isi content dari kelompok pertama</div>
<h2><a href="#">Kelompok Kedua</a></h2>
<div>Isi content dari kelompok kedua</div>
<h2><a href="#">Kelompok Ketiga</a></h2>
<div>Isi content dari kelompok Ketiga</div>
</div>
</body>
</html>
Lebih jelasnya bisa lihat contoh pada link Berikut
Pada contoh diatas untuk membuka isinya kita harus mengklik header, bagaimana jika kita ingin membuka isinya cukup dengan mengarahkan cursor mouse ke bagian header?
Caranya mudah saja cukup menambahkan beberapa sintak di dalam script jquery nya seperti berikut :
$("document").ready(function(){
$("#isi").accordion({
event:"mouseover"
});
});
No comments:
Post a Comment