How to Build a Custom jQuery Tabs Plugin: New Premium Tutorial
Download Source Files
In this week’s 45 minute Premium video tutorial, I’ll personally teach you how to build a flexible jQuery tabs plugin. This plugin will automatically create the individual tabs, allow for auto-switching, fading, and plenty more – without being bloated. Why create a tabs plugin when there are plenty of them already available? Because too much abstraction is never a good thing. Become a Premium member.
Join Tuts Premium
For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Oh this is awesome, I was visiting your blog today and I think I saw something like. It from the start drew my attention, because I have yet to learn how to make my own tab system from scratch.
Yep! The video tutorial is exclusive to our Plus section though.
How many more “tabs” tutorials do we need for jQuery? There are millions already…
The more the merrier..
that’s why this kind of tutorial should be free.
good post thanks jeffrey
It will be a really good tut jeff, but downloaded videos are not compressed. Please make them zip ;)
Thanks.
Always great stuff, Jeff.
It’s funny to hear in every screencast you record, whenever there’s a small hickup and you discover what you did wrong, you say ‘oh, of course!’ (like, no duh! obviously!).
The new jquery’ers will feel bad :D.
Yeah – I used to edit those hiccups out…but I’ve realized that there’s much to learn from watching somebody else debug. :)
Indeed it does.
+ it also makes me feel better about myself when I’m staring at the screen going “Jeff…. Jeff…. mistake’s right there…… Jeff, you’re cold right now.” ;)
Haha, same here :)
Hello everybody
que pasa si no soy usuario?
Ejeles:
Algunos tutoriales son exclusivos para miembros, osea, la mayoria de los tutoriales son gratis pero hay otros como este que son exclusivos para los miembros que pagan una cuota mensual.
:(
Que bien encontrar usuarios que hablan español :D
It is good to find users that speak spanish :D
I know, I’m just lucky that I speak english and spanish, but it’s a shame for the developers that don’t speak english because they are missing on all the great material that we get from Nettuts.
Within the last month or so, I noticed what appears to be a languages menu up by the search bar; only English right now, but it says “more coming soon!” Looks like Nettuts+ is about to get even better!For the record, that’s all I know about it, and that menu may have already been there for a while.
Tabs tutorial again! :P but nice
thanks again….i like dis tutorial…
Great tut, easy to follow screencast, love it!
But, you’re probably sick of hearing this, but when is Part 2 of the “How to Build a Login System for a Simple Website” tut coming??? :)
Great tut! :D Is there coming another CI from scratch tut?
Nice tutorial – as always.
An excellent advert to all those sitting on the fence about signing up to tutsplus – I can honestly say that not only is this a great tutorial, it’s to the point, it’s accurate and plus you spent a good 10 mins going over the CSS at the end which is always appreciated.
Top quality thanks very much!
There are times when I’m really glad to pay Envato a pizza every month!
This tutorial was easy to follow and the result is great! I agree with the.dentist, there are already a myriad of plugins and tutorial on the subject out there, but they’re usually not up to it.
If I had something to say, it would be regarding the shadows you applied to these divs. I’m not fond of them, I think they could have looked a lot nicer.
Anyway, keep up with the good work Jeff!
THIS TUTORIAL IS A BIG JUNK!, WASTE OF TIME, WASTE OF BANDWITH, ANOTHER JUNK SUBMISSION FROM THE GARBAGE AUTHOR. I KNOW EVERYTHING ABOUT JQUERY AND I DONT NEED THIS TUTORIAL BECAUSE I KNOW ALREADY. IM RICH AND INTELLIGENT AND YOUR A LOSER.
Easy, but useful
I’m sure the tutorial is easy and well drawn but there are many free tuts that do the same thing, just google it. If Nettuts would put out some original tutorials I might actually subscribe.
I am a convert from using Lynda.com… Much appreciated content and Jeff you are awesome at explaining.
Thanks so much!
Thanks Jeffrey, my first adventure into plug-ins, fun stuff.
If in the tab content area I embed a video, how would I make the interval rotation stop if the video is clicked to play, so I don’t have to leave the cursor in there?
Thank you :)
Am I the only one who cant download this tutorial? Seem to getting lots of error messages on the plus content.
AccessDeniedAccess Denied
F50F5CCB9EDD6B62
−
3ccMUcHcyTOGUdCXlafDsuMEvurxM5VKjiyEnrvP0ivDJQp4KQgdA+F82K/jpI1b
I’m a premium member but can’t find the video. Is it still there?
I cant find it either? where is the video? :)