Untuk lebih menarik tab yang kita buat, kita dapat menambah efek animasi.
Untuk memberikan efek animasi kita cukup memberikan parameter yang berisi informasi efek animasi yang kita inginkan. Codingnya adalah seperti berkut ini :
var tab_opt = {
fx: {
opacity: “toggle”,
duration: “slow”
}
};
$(“#tabku”).tabs(tab_opt);
Coding secara lengkap adalah seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Tab</title>
<link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”>
</head>
<body>
<div id=”tabku”>
<ul>
<li><a href=”#a”>Tab 1</a></li>
<li><a href=”#b”>Tab 2</a></li>
</ul>
<div id=”a”>Ini isi dari tab 1 yang dilink dari Tab 1</div>
<div id=”b”>Ini isi dari tab2 yang akan muncul jika Tab 2 diklik</div>
</div><!–end of tabku–>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.widget.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.tabs.js”>
</script>
<script>
(function($){
var tab_opt = {
fx: {
opacity: “toggle”,
duration: “slow”
}
};
$(“#tabku”).tabs(tab_opt);
})(jQuery);
</script>
</body>
</html>
Demonya dapat dilihat di http://aris.proweb.asia/tab_dengan_animasi.html.
Penjelasan lebih lanjut mengenai tab dengan jQuery UI dapat dilihat di http://jqueryui.com/demos/tabs/.
Kunjungi www.proweb.co.id untuk menambah wawasan anda.