jQuery Sliding Tabs
Kodnya:
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type=text/javascript></SCRIPT>
<SCRIPT src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js" type=text/javascript></SCRIPT>
<SCRIPT>
jQuery.noConflict();
(function($) {
$(document).ready(function() {
//Get the height of the first item
$('#mask').css({'height':$('#panel-1').height()});
//Calculate the total width - sum of all sub-panels width
//Width is generated according to the width of #mask * total of sub-panels
$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
$('#panel div').width($('#mask').width());
//Get all the links with rel as panel
$('a[rel=panel]').click(function () {
//Get the height of the sub-panel
var panelheight = $($(this).attr('href')).height();
//Set class for the selected item
$('a[rel=panel]').removeClass('selected');
$(this).addClass('selected');
//Resize the height
$('#mask').animate({'height':panelheight},{queue:false, duration:500});
//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
$('#mask').scrollTo($(this).attr('href'), 800);
//Discard the link default behavior
return false;
});
});
})(jQuery);
</SCRIPT>
<style>
/*
body {
padding:0;
margin:0 20px;
background:#d2e0e5;
font:12px arial;
}
*/
#scroller-header a {
text-decoration:none;
color:#867863;
font-size:medium;
padding:0 10px;
border-style:solid;
border-width:thin;
border-bottom-style:none;
background:#c0c0c0;
}
#scroller-header a:hover {
text-decoration:none;
background:#000;
color:#fff
}
a.selected {
text-decoration:none !important;
color:#4b412f !important;
background:#fff !important;
font-weight:bold;
}
/*
#scroller-header {
background:url(images/header.gif) no-repeat;
width:277px;
height:24px;
padding:35px 0 0 15px;
font-weight:700;
}
#scroller-body {
background:url(images/body.gif) no-repeat bottom center;
width:277px;
padding-bottom:30px;
} */
#mask {
width:100%;
overflow:hidden;
margin:0 auto;
border: 1px solid #ccc;
}
#panel {
}
#panel div {
float:left;
}
/* Extra styling for each panel*/
#panel ul {
list-style:none;
margin:0 10px;
}
#panel ul li {
padding:5px;
color:#557482;
border-bottom:1px dotted #ccc;
}
#panel ul li.last {
border-bottom:none !important;
}
#panel-1 {
/*height:300px;*/
}
#panel-2 {
/*height:300px;*/
}
#panel-3 {
/*height:300px;*/
}
#panel-4 {
/*height:300px;*/
}
#panel-5 {
/*height:300px;*/
}
</style>
<DIV id=scroller-header>
<A class=selected href="#panel-1" rel=panel><!--<IMG src="media/ikon/umum.png" border=0>-->List</A>
<A href="#panel-2" rel=panel><!--<IMG src="media/ikon/kalendar.png" border=0>-->Item 2</A>
<A href="#panel-3" rel=panel><!--<IMG src="media/ikon/kalendar.png" border=0>-->Item 3</A>
<A href="#panel-4" rel=panel><!--<IMG src="media/ikon/staf.png" border=0>-->Item 4</A>
<A href="#panel-5" rel=panel><!--<IMG src="media/ikon/pelajar.png" border=0>-->Item 5</A>
</DIV>
<DIV id=mask>
<DIV id=panel>
<DIV id=panel-1>Slide 1
<ul>
<li>List 1
<li>List 2
<li>List 3
</ul>
</DIV>
<DIV id=panel-2>Slide 2
</DIV>
<DIV id=panel-3>Slide 3
</DIV>
<DIV id=panel-4>Slide 4
</DIV>
<DIV id=panel-5>Slide 5
</DIV>
</DIV>
</DIV>