Example

You could download the simpliest example using the plugin here: tabSwitch.SimplePlugin

You could change different effect by click on the effect buttons.
Turn on auto switch by click on the Auto button. You could also change the interval in the text box.
Check the code tab, it has the source code for the effect. It changes everytime you choose a new effect.

Slide

Fade
Show
Toggle
No Effect

Auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim ligula, eleifend ut, luctus eget, eleifend a, diam. Proin ut libero in tortor interdum placerat. Fusce varius vehicula elit. Mauris malesuada tortor a massa. Fusce adipiscing egestas felis. Proin ornare sem ut turpis. Cras ultricies mauris gravida magna. Phasellus ac ligula. Donec quis sem. Nam ornare volutpat quam. Praesent egestas sapien non eros. In quis velit. Vestibulum eleifend, justo at egestas faucibus, justo erat tristique orci, eget hendrerit diam sem sed urna. Sed tincidunt, lectus a posuere blandit, nulla risus sollicitudin neque, non tincidunt turpis ante eget erat. Duis scelerisque purus nec lacus. Nulla facilisi. Nam vel enim eu odio sagittis pulvinar. Morbi eu odio. Sed eget enim vitae libero vulputate porttitor. Sed non arcu.
Nam dui odio, condimentum vel, semper in, blandit vel, nisi. Aenean et sem nec lorem tincidunt tincidunt. Cras mi. Fusce odio magna, molestie eget, auctor non, suscipit et, felis. Nam ultricies, dui tristique mollis lacinia, magna diam aliquam orci, non pretium turpis purus nec arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet augue ut dui vestibulum consequat. Sed sed tellus quis est pellentesque mollis. Phasellus nulla elit, faucibus eget, faucibus non, pretium vel, ligula. Vestibulum tristique enim et sapien. Mauris a nisl id tortor sollicitudin fermentum. Nulla mattis porta lectus. Aliquam at erat.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce consectetur, erat eget egestas scelerisque, nisi risus viverra erat, sed iaculis est metus in diam. In tempor adipiscing velit. Morbi fermentum mollis libero. Pellentesque ornare. Cras elementum, eros at interdum fringilla, est orci tincidunt purus, a convallis sem mi a eros. Maecenas metus mauris, pharetra et, venenatis ornare, euismod id, felis. Nam id nibh a mi dignissim tristique. Aenean at lectus a neque tincidunt rutrum. Pellentesque id sem vitae enim interdum elementum. Morbi metus enim, tempus vel, laoreet sed, scelerisque non, quam. Cras egestas congue leo. Donec placerat, enim sit amet ullamcorper pharetra, libero massa rutrum augue, vitae tincidunt tellus lacus eu purus.
Curabitur vehicula mauris at quam. Pellentesque vel neque id ligula rutrum aliquet. In eget magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisis luctus sapien. Donec non dui ut lectus tincidunt facilisis. Vivamus varius cursus justo. Vivamus ac diam vel mauris pretium lacinia. Donec eu est. Praesent erat dolor, egestas at, tempor a, consectetur et, metus. In lorem purus, vehicula at, bibendum in, scelerisque et, augue. Morbi tristique, nulla eget elementum malesuada, purus dolor viverra erat, et rutrum libero eros nec sapien. Maecenas semper ultrices nisi.
Aliquam nulla. Cras sed lacus a massa adipiscing laoreet. Cras eu libero. Mauris eleifend. Ut augue sem, consectetur pulvinar, facilisis non, dignissim at, risus. Nam pretium, massa non ornare adipiscing, tellus enim faucibus sem, sit amet porta mauris sapien vitae nibh. Proin malesuada felis eget purus. Duis non augue in metus volutpat porta. Ut elementum. Suspendisse ut quam sed sapien mattis fermentum. Aliquam facilisis, mauris id pulvinar gravida, libero eros consequat nisi, ac ullamcorper augue diam sit amet nunc. Pellentesque mattis placerat justo. Aliquam aliquet consectetur mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tincidunt mollis diam. Suspendisse potenti. Aliquam mollis odio sed diam malesuada sodales. Suspendisse ipsum. Phasellus sapien.

The javascript code:



  • Delicious
April 17th, 2009
Benedict Chan

This plug-in is cool~~~~

However, the Page Index in this example is 1 step late after changing Tab.

I found that inside the plug-in, you call a callback function “Callback” to update the index after each movement. Which makes this delay when you try to call
$(“.SlideTab”).tabSwitch(‘index’) in the example because the Cache is not yet updated.

At this moment, I think we can make use of the “EndFunction” from the plug-in to fix this problem, but hope this can be fixed in the next version.

One of the changes to fix the example now,
FROM
$(“.swNav”).click(function(){
$(“.SlideTab”).tabSwitch(‘moveStep’,{step: parseInt($(this).attr(‘rel’))}
);
setTabIndex();
});

TO
$(“.swNav”).click(function(){
$(“.SlideTab”).tabSwitch(‘moveStep’,{step: parseInt($(this).attr(‘rel’))}, setTabIndex );
});

Best Regards
Benedict

April 21st, 2009

Thank to point this out Benedict. You’re right, I didn’t check the navigation code carefully. Will fix it ASAP :) .

April 21st, 2009

Nice Plugin! Thanks for sharing it.

April 30th, 2009
Ahmed

Hi
nice plugin
but i was wondering how is it possible to run this plugin inside facebox plugin?

May 23rd, 2009
Candace Haynes

Hi… Nice smooth plugin first off… I was wondering how I might go about changing the active tab style though.

For Example:

Tab 1 | Tab 2 | Tab 3
____

You are on tab 1. So tab 1 is underlined.

June 4th, 2009
Dorith

Absolutely love it! I’m using it on my website for our next update. Simply amazing and with all the features, it can be useful in more than one instance. You also give great help with all the comments and coding. Really amazing job! Keep it up!

June 4th, 2009

Thank for the kind words Dorith. Happy to share with every one :)

July 14th, 2009

Dear SIR

I would like to ask you tabswitch can be used to blogger?

Coz have not been able to use the success

July 17th, 2009

I never try it with blogger before. But if jQuery run fine in blogger, then this plugin should be.

July 22nd, 2009

Awesome, I’m gong to use this in my site

September 3rd, 2009
Simone

Hi! Great plugin, i was wondering if it is possible to show 2 divs per time and slide them together?
Thank u!
Keep up the good work!!!

September 19th, 2009

Hey, I was just wondering if you knew how I could update the script to incorporate a default selected tab? I want to be able to show any tab as the selected tab by default, and the best I can do is to call moveTo on load, which causes the animation to fire. I just want that tab to be displayed right away, no extra animation.

November 5th, 2009
Erika

Hi,

When I tried to link to one of the tabs, for example using example.com/index.htm#tab1, the rest of the links to the tabs is out of order once I get to that page.

Could you please help.

Thanks!
Erika

May 9th, 2010
Andrew Christensen

I don’t suppose you have an update to this script for version 1.4.2 of jQuery. It’s completely broken with the latest jQuery.

Trackbacks
April 23rd, 2009
April 27th, 2009
April 30th, 2009
October 20th, 2009
May 13th, 2010
May 23rd, 2010
Leave a Reply