jQuery Page Tabs Plugin – idTabs

Tabs, Page Tabs or Page Navigation Panel is very useful in webpage design. It can save a lot of space. Moreover users can navigate the contents with different topics easily.

In the old days, making a tab is a rather tedious job for webpage designers. However this is just a simple job by using jQuery Tabs Plugins. There are many free jQuery Tabs Plugins on the Internet. The idTabs jQuery Plugin is a simple and easy-to-use plugin.

Below is a Tab example made with jQuery idTabs Plugin.

Using the jQuery idTabs Plugin:

1. The first step is to download jQuery idTabs Plugin at developer website:

  • http://www.sunsean.com/idTabs/

2. The download package include the following file:

  • jquery.idTabs.min.js

3. Save the file.

How to Use jQuery idTabs Plugin

Using the jQuery idTabs Plugin is very simple and easy.

Webpage Header Section

Include the required files within the header section:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />

<title>jQuery Tab Plugin - idTabs</title>
</head>

Webpage Body Section:

Write the codes same as an order list. However the order list will display as Tabs rather than list. Of course you need to prepare the styles for the order list as usual.

<body>

<div id="main">
<ul>
<li><a href="#plugin">idTabs Plugin</a></li>
<li><a href="#download">Download idTabs</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="plugin">
<h2>jQuery idTabs Plugin</h2>
This is a simple, yet the best jQuery Tab Plugin!
</div>
<div id="download">
<h2>Download idTabs Plugin</h2>
jQuery idTabs Plugin can be download at<br /> http://www.sunsean.com/idTabs/
</div>
<div id="tab3">
<h2>Tab 3</h2>
This is contents of Tab 3.....
</div>
</div>

</body>
</html>

As you can see, this is rather easy to use jQuery to make a Page Tabs.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>