GrassHopperPebbles.com Demos

JQuery Plugins

imAnimTabber 1.0 - Slide Option

The following example shows how to use the imAnimTabber with the attribute option set to 'slide'. The 'slide' option is similar to the original upSideDownTabber plugin (replaced by this plugin). The only difference between the 'height' option and the 'slide' option is the styling of the the content container. With the 'height' option the content container style is set to a specific height. While with the 'slide' option, no height is set for the container because the container will grow to height needed to view all the content (see the tab_conent class).

The html:

<div class="page">
	<div id="top_bar"></div>
	<div id="slider">
		<div id="about" class="tab_content">This<br />
		is<br />
		the<br />
		About<br />
		Content</div>
		<div id="Links" class="tab_content">
			This<br />
		is<br />
		the Link<br />
		Content</div>
		<div id="Recent" class="tab_content">
			This<br />
		is the Recent<br />
		Content	</div>
	</div>
</div>

The CSS:

.page {
	float:left;
	width: 600px;
	margin-left: 20px;
	margin-top:20px;
	min-height:500px;
}
#top_bar {
	float:left;
	width:600px;
	height:24px;
	background-color:#ff6600;
}
#slider {
	width:600px;
	float:left;
	background-color:#727272;
}

.tab_content {
	width:580px;
	display:none;
	float:left;
	margin-left:11px;
	padding-left:10px;
	font-size:11px;
	color:#fff;
	border-bottom: solid 2px #000;
}

#tab_cntnr {
	width:600px;
	float:left;
	background-color:#727272;
}

#tab_cntnr a {
	display:block;
	text-decoration:none;
	float:right;
	width:75px;
	height:26px;
	color:#fff;
	background: url('menu_tab.jpg') no-repeat; 
	text-align:center;
	font: bold 10px Helvetica, Arial, sans-serif;
	margin-right:5px;
	padding-top:3px;
}

#tab_cntnr a.selected {
	color:#2d2d2d;
	background: url('menu_tab_over.jpg') no-repeat; 
}
	

The Plugin:

$(document).ready(function(){
	$("#slider").imAnimTabber({
		tab_container: 'tab_cntnr',
		active_tab_class: 'selected',
		//don't need set attribute option - 'slide is the default
		//attribute: 'slide',
		tabs: [{"caption": "Recent", "content_id": "Recent"},
		 {"caption": "Links", "content_id": "Links"}, 
		 {"caption": "About", "content_id": "about"} ]
	});
});

For documentation about the imAnimTabber plugin, view my blog post.

DEMO:

This
is
the
About
Content
This
is the Recent
Content

Tags

, , , , , ,