Home > JQuery > An easy to use jQuery Tabs plugin

An easy to use jQuery Tabs plugin

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 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 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:
Advertisements
Categories: JQuery
  1. No comments yet.
  1. No trackbacks yet.

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: