Simple jQuery Tabs plugin

My New jQuery Book

When you pre-order today you not only support spontaneous jquery tutorial creation, you also save 50% on your order.

Preorder my new jQuery e-book before March 31st, and get a 50% discount.

Thank you for your support!

Simple jQuery Tabs plugin was designed with simplicity in mind. The tabs are stored inside the "master" DIV block. The content of each tab is placed within additional DIV blocks that will toggle between visible and invisible state, depending on which tab is currently selected.

jQuery plugin development note - the main application object. Over a period of time, I developed a system for developing jQuery plugins (I mainly learned all of this from jQuery books). In many of the jQuery plugins that I write, I create a DIV block whose role is being the plugin application placeholder. This placeholder is usually added by the web developer to a location on their webpage where they want that plugin to be displayed. This makes plugin development easier.

Defining the jQuery tabs plugin application object:

// Define the application placeholder for jQuery tabs
// The plugin will take care of the rest
<div id = "MyTabbedView"></div>

The plugin's jQuery object will take the id name of the main application object, which in this case is MyTabbedView. The code will take care of writing the internal display into this application area by itself, so there is no need to write any additional HTML. Note that while the code is working properly, this is a tabbed view example that is limited to one tabbed view area per one initialization call by design. It would be possible to consolidate this code by providing an initialization interface that takes multiple div fields and builds multiple tabbed views on a single web page. Like with other plugins I had written for Authentic Society, this trivial task is up to the web developer implementing my plugin code on their own sites.

Now that we have defined the main application object MyTabbedView, it's time for the next step. Let's create some content for our tabbed view pages:

// Create 3 pages, each id must be unique
// These id's are conveniently passed to the plugin's initialize function later
// You may place any content you wish into these blocks
<div id = "Page1">Page 1<br/>Description of jQuery Tabs plugin</div>
<div id = "Page2">Page 2<br/>How to use this plugin</div>
<div id = "Page3">Page 3<br/>Download plugin</div>

Initializing and Executing the jQuery Tabs plugin

<script type = "text/javascript">
    // initialize plugin code
    $(document).ready(function() {

        jQuery.Tabs.initialize( "MyTabbedView",
                                "300px", "150px",
                                ['Description', 'How to Use', 'Download'],
                                ['Page1',       'Page2',      'Page3'] );

    });
</script>

We pass the main application placeholder MyTabbedView to the plugin Tabs.initialize function. We then pass the horizontal and vertical dimensions of our tabbed view respectively: 300px and 150px. We then pass two arrays of strings. The first array indicates tabs' names. The second array indicates the id's of the pages the tabs link to. If you wanted to create more than three tabs, simply extend both of the arrays in the same way as demonstrated in the code above, and don't forget to specify additional pages with unique id's (Page1, Page2, ... Pagen).

Final words on jQuery Tabs plugin

A tabbed view interface can provide a convenient way to display associative information in one place. This jQuery plugin creates a tabbed view by taking the minimum parameters required. This plugin can be further improved by providing an interface to create multiple tabbed views on one page, but I'll leave that up to you. jQuery once again shows how easy it can be to create something as complex as a tabbed view with just a few lines of code!

Click to see this plugin in action:

I enjoy writing for the Internet audiences because my thoughts are instantly published to the entire world. My work consists of writing educational articles about making websites to help people learn. If you enjoyed reading this article, or learned something new, then I have succeeded.

If the content on this website somehow helped you to learn something new, please let others know about it by sharing it on your website or on your Facebook page with your friends. In addition you can help by making a donation or bookmarking this site.