Setelah kita berhasil menambahkan efek animasi saat pergantian tab, kita bisa membuat supaya tab bisa berpindah otomatis. Dengan cara ini kita bisa membuat slideshow dengan jQuery Ui.
Untuk membuat supaya tab-tab tersebut berpindah secara berputar kita cukup menambahkan tabs(“rotate”,3000,true) seperti contoh di bawah ini
(function($){
var tab_opt = {
fx: {
opacity: “toggle”,
duration: “slow”
}
};
$(“#tabku”).tabs(tab_opt).tabs(“rotate”,3000,true);
})(jQuery);
Coding lengkapnya adalah :
<!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>
<li><a href=”#c”>Tab 3</a></li>
<li><a href=”#d”>Tab 4</a></li>
</ul>
<div id=”a”><img src=”pic/header1.jpg” /></div>
<div id=”b”><img src=”pic/header2.jpg” /></div>
<div id=”c”><img src=”pic/header3.jpg” /></div>
<div id=”d”><img src=”pic/header4.jpg” /></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).tabs(“rotate”,3000,true);
})(jQuery);
</script>
</body>
</html>
Demonya bisa dilihat di http://aris.proweb.asia/tab_rotate.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.