Skip to content

jQuery Plugin: TabScroller

July 6, 2011

Few days back, I was working in a web page. The web page is a three column layout with long page of text which makes the end users to sign off. There are several ways to minimize such content like accordion, exapand & collapse, tabbed navigation, etc. Since, it is a corporate website, I planned to make that in tabbed navigation which is a standard user interface. I faced a problem while doing that, Being it is a three column layout, I couldn’t have more that 5 tabs. After sometimes, I decided to put a scroller at both the end of the tabs, so that end users can slide and navigate to different tabs and also I can have ‘n’ numbers of tabs. Then later, I started developing this as a plugin, so that it will be useful for everyone. TabScroller is open source jQuery plugin, you can use this for developement and further enhancement.

TabScroller

 

How to Use?

TabScroller is very easy to implement in your web page. Follow the steps below,

Step 1: Include the Script

Include the javascript files inside the HTML document.


<script type="text/javascript" src="your_file_path/jquery-1.6.1.js"></script>
<script type="text/javascript" src="your_file_path/tabscroller.js"></script>

Step 2: Include the CSS

Include the style sheet inside the of the HTML document.


<link href="your_file_path/tabscroller.css" type="text/css" rel="stylesheet" />

Step 3: The HTML

Please follow the same HTML structure.


<div id="tabscroller_demo"> 
	<div> 
		<ul> 
			<li><a href="#" rel="tab_one" class="active">Tab One</a></li> 
			<li><a href="#" rel="tab_two">Tab Two</a></li> 
			<li><a href="#" rel="tab_three">Tab Three</a></li> 
			<li><a href="#" rel="tab_four">Tab Four</a></li> 
			<li><a href="#" rel="tab_five">Tab Five</a></li> 
			<li><a href="#" rel="tab_six">Tab Six</a></li> 
			<li><a href="#" rel="tab_seven">Tab Seven</a></li> 
		</ul> 
	</div>
	
	<div id="tab_one" class="active"> 
		Your content here...
	</div> 
	
	<div id="tab_two"> 
		Your content here...
	</div> 
	
	<div id="tab_three"> 
		Your content here...
	</div> 
	
	<div id="tab_four"> 
		Your content here...
	</div> 
	
	<div id="tab_five"> 
		Your content here...
	</div> 
	
	<div id="tab_six"> 
		Your content here...
	</div> 
	
	<div id="tab_seven"> 
		Your content here...
	</div>

</div>

Step 4: Activate the Plugin

Activating it with the ‘id’ or ‘class’ that you have used in the div tag.


$('#tabscroller_demo').tabscroller({
	scroller: true  /* Optional. It should be provided, only when the tab count exceeds. There also another option to change the images of 			
					the left and right navigatio. Please have a look at the "tabscroller.js" and search for 'nextnav' and 'prevnav'. */
});

Thats it. You have done.

Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: