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.
Example
Code
Slide
Fade
Show
Toggle
No Effect

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:






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
Thank to point this out Benedict. You’re right, I didn’t check the navigation code carefully. Will fix it ASAP
.
Nice Plugin! Thanks for sharing it.
Hi
nice plugin
but i was wondering how is it possible to run this plugin inside facebox plugin?
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.
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!
Thank for the kind words Dorith. Happy to share with every one
Dear SIR
I would like to ask you tabswitch can be used to blogger?
Coz have not been able to use the success
I never try it with blogger before. But if jQuery run fine in blogger, then this plugin should be.
Awesome, I’m gong to use this in my site
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!!!
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.
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
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