jQuery.gTabs plugin - tabbed interface plugin

Hi, everybody!

Let’s dance for a little around my favorite JavaScript framework jQuery!

Today I’d like present you my new creature based on it.
This is new jQuery plugin the purpose of which gives you easy way to create tabbed UI elements on your pages.

Let’s look the peaces of code.

JavaScript initialization code:

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

HTML part of code:

<div id=“gTabs”></div>

<div id=“_tabs_0″ class=“_tabs_area”>body of tab 1</div>
<div id=“_tabs_1″ class=“_tabs_area”>body of tab 2</div>
<div id=“_tabs_2″ class=“_tabs_area”>body of tab 3</div>
<div id=“_tabs_3″ class=“_tabs_area”>body of tab 4</div>

The picture shows how it will look on a page:
shoot1

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.

Download, get more details and see other interesting examples of usage you can on the jQuery.gTabs page.

I will happy to see your comments about, thank you in advance!

No Responses so far »

Comment RSS · TrackBack URI

Say your words