GrassHopperPebbles.com Demos

JQuery Plugins

imAnimTabber 1.0 - Width Option

The following example shows how to use the imAnimTabber with the attribute option set to 'width'. I also set the mode to 'manual' because I created the tabs myself rather than have the plugin do it for me. Also, notice that I do not need to set the 'tab_container' option because I have used the 'class_name' option within the 'tabs' option. The 'class_name' option can be set when using the 'height', 'width', and 'fade' attribute options (in manual mode). I also don't need the 'caption' option when in manual mode. Remeber, when using 'width' or 'fade' attribute, you must set the default content that will be displayed ("select": true).

The html:

<div class="page">
	<div id="tab_cntnr">
	<ul>
		<li><a href="#" class="about">About</a></li>
		<li><a href="#" class="link">Links</a></li>
		<li><a href="#" class="recent">Recent</a></li>
	</ul>
	</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: 300px;
}
#tab_cntnr {
	float:left;
	width:600px;
	height:24px;
	background-color:#000;
}
#tab_cntnr ul {
  list-style:none;
  padding:0;
  margin-top:5px;
  text-align:center;
  margin-left:0;
}
#tab_cntnr li {
  display:inline;
  margin-left:20px;
  margin-right:20px;
}
#tab_cntnr a {
  font: bold 11px Helvetica, Arial, sans-serif;
  margin-bottom:0;
  color:#80ff00;
  text-decoration:none;
}
#tab_cntnr a:hover { 
  color:#fff;
}
#tab_cntnr a.recent {
	color:#ff0066;
	
}
#tab_cntnr a.link {
	color:#ffcc00;
	
}
#tab_cntnr a.about {
	color:#9999cc;
	
}
#tab_cntnr a.recent_sel {
	color:#ff6600;
}
#tab_cntnr a.link_sel {
	color:#66ff00;
}
#tab_cntnr a.about_sel {
	color:#00cccc;
}
#slider {
	width:600px;
	float:left;
}

.tab_content {
	width:600px;
	display:none;
	float:left;
	font-size:11px;
	color:#fff;
	height: 150px;
	background-color:#727272;
}	

The Plugin:

$(document).ready(function(){
	$("#slider").imAnimTabber({
		mode: 'manual',
		attribute: 'width',
		tabs: [{"content_id": "Recent", "class_name": "recent", "active_tab_class": "recent_sel"},
		 {"content_id": "Links", "class_name": "link", "active_tab_class": "link_sel"}, 
		 {"content_id": "about", "class_name": "about", "active_tab_class": "about_sel", "selected": true} ]
	});
});	

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

DEMO:

This
is
the
About
Content
This
is the Recent
Content

Tags

, , , , , ,