What is this
tabSwitch is a tab/slider plugin for jQuery. You could make a tab box system with the least of code and still fully customizable. Currently, you could choose from 7 different effects with 2 view styles. You could also hot swap the effects around in runtime.
Check out the example to see all the customize of the plugin in action.
Why should you use this
Easy to use
Make sure you could complete it with the least code you need and still keep the plugin flexible.
Effects
I throw in a few effects so web designers/developers have the choices for their work and trust me there will be more in the next release.
Customizable
- There is no limit what kind of HTML tag you use.
- You could move to next, prev tab or jump to a specific tab.
- All the controls could be anywhere in the website, on top of a tab, inside a tab…
- Multi-level tab system.
- You could change the style of the viewport, you could add a class for every single tab…
A lot more…
Open Source – Developer friendly
All the code is commented to explain itself. The reason is so everyone could read and understand the code edit it to suitable with the situation you want. Sometime you only need just 1 single effect not the whole plug-ins so you could change it to optimize for you situation.
Get latest updates
You could follow me on Twitter: Twitter HieuUK
Or get the latest updates of my blogs by: RSS and Email
Spread the word
To help tabSwitch grow, please vote to spread the word arround ^_^
Other jQuery articles
-
How easy to create a slide tabbed box using jQuery
-
How to make plugin $.extLinks: Control the links
-
The Simpsons in CSS with CSSFromDraw
-
8 guides to apply jQuery and ImageSwitch in web design
Very good job! Thanks.
Wow, very useful, I like all options. Thanks
great plugin! nice job!
How do you add MULTIPLE tab sliders on one page?
dsfsf
AEDMjD thanks for you.. nice good document!,
KkUaTC great tips. I enjoyed reading this,
Hi HieuUk!
I’m using your fantastic script and worked perfect at web-standard browsers, but when I put my eyes to IE 6 and your family, include IE8, I have a little problem. My TabContent has a PNG bgnd image and when I load the page, the image doesn’t load with transparency effect correct, only 100% or 0%, not 50% of transparency.
Note: I’m using another script (pngfix) to correct the png bug at ie6 and the error at this browser was resolved. But in IE8 ( I couldnt test at IE7) the problem continue.
I started a test (wrapping with comments)line by line in my script to discovery where the bug occur and, I founded the ‘error’ at first line after “$(function(){“:
wrapping only this line the image work well.
How could I solve this problem using your wrapperClass or viewportClass option? Just putting the background-image adress there? please gime a powerfull light ! and sorry, sorry, sorry for my poor english.
Hi, opacity filter is still a problem in IE. I don’t really know how to fix it myself. It’s such a shame for the new IE really
.
i think that would be the best alternative to the frontpage slideshow commercial joomla and wordpress plugin … i searched alot about something like it but i didn’t find ….. thank you very much
Hi
I need a slider or a face effect on a vertical tab, and I have so far been unable to create that 
Already “wasted” hours on different plugins/tutorials.
I really like the example in the frontpage, but imo the examples you include for download is too far away from that design
Hi There — I was wondering if it were possible to add a special class to an ‘active’ tab? Thanks!
Hi,
i was really impressed, just want to say good work and thank u for such amazing tools
Great plugin, easy to use. Thanks for sharing!
+1 for Lara’s suggestion for a .current class. That would really make it a full-fledged menu!
Hola, esta muy bueno el slider, estoy rediseñando mi web, asi q pronto lo veras por ay, eso dalo por hecho http://www.mediasur.cl, esa es mi web, saludos. desde chile
Trackbacks