Awesome articles on your favorite subjects. No Spam.

An easy to use jQuery Tabs plugin

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:


Download jQuery Tabs plugin (1.81kb)

Note, this is an old plugin I've written just after jQuery came out. That means it's not the best JavaScript code, as I didn't know what I do know about jQuery. But still it isn't too complicated or bad, however I would change a few things around if I were writing it today.

If you found this code useful, please write me an email. I'd be glad to help you optimize or improve this for your particular cause.

Awesome articles on your favorite subjects. No Spam.