plusvideos

How to Build a Custom jQuery Tabs Plugin: New Premium Tutorial

on Nov 18th 2009 with 33 comments
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.

Unstyled
Final Product

Join Tuts Premium

NETTUTS+ Screencasts and Bonus Tutorials

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!


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://spotdex.com/ David Moreen

    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.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yep! The video tutorial is exclusive to our Plus section though.

  • the.dentist

    How many more “tabs” tutorials do we need for jQuery? There are millions already…

    • Kevin

      The more the merrier..

    • fesh

      that’s why this kind of tutorial should be free.

  • http://vector.laroouse.com esranull

    good post thanks jeffrey

  • http://www.imblog.info Muhammad Adnan

    It will be a really good tut jeff, but downloaded videos are not compressed. Please make them zip ;)

    Thanks.

  • http://chrisberthe.com/ chrisberthe

    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.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yeah – I used to edit those hiccups out…but I’ve realized that there’s much to learn from watching somebody else debug. :)

  • http://chrisberthe.com/ chrisberthe

    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.” ;)

    • http://tutsvalley.com Slobodan Kustrimovic

      Haha, same here :)

    • tdz

      Hello everybody

  • http://urlopcional.email Ejeles!

    que pasa si no soy usuario?

    • http://www.fatlizardmedia.com Juan C Rois

      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.

      :(

    • http://www.quizzpot.com Crysfel

      Que bien encontrar usuarios que hablan español :D

      It is good to find users that speak spanish :D

      • http://www.fatlizardmedia.com Juan C Rois

        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.

      • http://andrewburgess.posterous.com Andrew Burgess

        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.

  • diego

    Tabs tutorial again! :P but nice

  • http://fairuzsulaiman.com Fairuz

    thanks again….i like dis tutorial…

  • Jason A

    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??? :)

  • Paul du Long

    Great tut! :D Is there coming another CI from scratch tut?

  • http://www.jeffadams.co.uk Jeff Adams

    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!

  • http://maximebornemann.com Maxime Bornemann

    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!

  • http://www.idontknow.com PHILIPPINE_SUPER_DEVELOPER

    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.

  • http://uid0.pl uid_0

    Easy, but useful

  • That Guy

    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.

  • kelly

    I am a convert from using Lynda.com… Much appreciated content and Jeff you are awesome at explaining.

    Thanks so much!

  • http://thatryan.com Ryan

    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 :)

  • Tobias

    Am I the only one who cant download this tutorial? Seem to getting lots of error messages on the plus content.

    AccessDenied
    Access Denied
    F50F5CCB9EDD6B62
    −

    3ccMUcHcyTOGUdCXlafDsuMEvurxM5VKjiyEnrvP0ivDJQp4KQgdA+F82K/jpI1b

  • Jay

    I’m a premium member but can’t find the video. Is it still there?

    • YoniPacheko

      I cant find it either? where is the video? :)

  • test

    Hey

    • test

      wow