jQuery.gTabs plugin

Prupose:: Provide easy way to create tabbed UI elements for your pages.
Author:
: Denis Golovtsov (aka GoLDen), www
Current version:: v0.1; MS Internet Explorer 7, FireFox 2, Opera 9
Last update:
: 07/01/2008
Offcial page:: jQuery.gTabs plugin
Download:: Latest stable version

Description

This is my own realisation of tabbed interface, which is quite popular kind of UI. This implemenattion is based on most popular jQuery framework. So it gives assumption that it will work fine in the widespread browsers.

Main features of jQuery.gTab plugin which I consider as its specific advantages:

Myself exclusive design of tab labels (items), which I consider as very compact, smart and quite pretty. I have got in from the one of mine old successful project. When I had seen it again, I decided to relive good solution.
It's support multi instance of tabbed controls on the page.
You can bind yourself handler, which will get content for new tab by Ajax for example.

Example 1

4 tabs and 1st one selected by default, where all options by default.


$('#gTabs_1').gTabs(['tab 1','tab 2', 'tab 3','tab 4'],'_tabs_ex1_');

body of tab 1

body of tab 2

body of tab 3

body of tab 4

Example 2

2nd tab is set to be selected by default, so you can define any tab to be selected by default. Notice that indexation of tabs starts from 0, so for a setting 2nd one I put 1 in the code, see below:


$('#gTabs_2').gTabs(['tab 1','tab 2', 'tab 3','tab 4'],'_tabs_ex2_',1);

body of tab 1

body of tab 2

body of tab 3

body of tab 4

Example 3

You can bind yourself handler(callback function) which is executed every time when new tab is selected. Below I'm binding the simple function which just print some text after every selection of tab.


$('#gTabs_3').gTabs(['tab 1','tab 2', 'tab 3','tab 4'],'_tabs_ex3_',0,function(index){$('#_ex3_out').append('tab_'+index+',')});

body of tab 1

body of tab 2

body of tab 3

body of tab 4

Output customer callback's: