If you’re building a web site which has tabs within the design, why not spice it up with a little JavaScript magic. Today we round up 10 JavaScript/Ajax Tab scripts you can easily incorporate into your future designs …
jQuery Coda Slider – The sliding effect is what the Coda-Slider is all about; Nice, slick content presentation
Perspective Tabs – Perspective tabs (formerly Sliding Tabs) is a simple mootools plug-in that allow for a large number of tabs to fit into a small space
jQuery ID Tabs – idTabs is a plugin for jQuery – It makes adding tabs into a website super simple, but it can also open the door to endless possibilities
Tab Accordion – Tabbed style accordion script written with Moo.FX
XP Style Tab Panes - It’s easy to configure this script. You put your content into separate DIVs and then call a JavaScript function which creates the tabs dynamically
Ajax Tabs – The purpose of doing Tabs in Ajax is not just to do something in Ajax. The context for which this is used is not for novelty
Tabbed Page Interface – There are quite a few JavaScript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from page tab to page tab without a page refresh
jQuery Nested Tab Set with Demo – Ok, there have been some changes, but I’ll try to keep it easy, with an example, and there will be an included .zip file. First, you’ll need the latest JQuery build, as well as the latest version of the Tabs Plugin. Pay attention to the pathing I have created in my code snippets here
Ajax Tabs Reloaded – From time to time you run across a cool site or test code and think that you may use it somewhere. I thought that about the HavocStudios Ajax tab system so I went back to the site to check it out
Tabs in Scriptaculous – This script will allow you to create interactive tabs for use in an application
Not a bad list, though I would note that only one (the JQuery Nested Tab) of them appears to work when JavaScript is disabled, which is a major accessibility problem.
This is a rather important issue if you are developing sites for the U.S. government (as I do) or intend your site to be used by diverse audiences.
Here is an example I put together using jQuery that is still accessible even with JS disabled: http://dev.darrenkrape.com/dos/usinfo/election/code/index.html (the calendar feature near the bottom left of the page).
Nice work Darren – Thanks for sharing that.
This ones are based in mootools, and are very easy to use!!!
supports loading almost everything.
Meteora Notebook
Agreed. This is a great stuff. However, AJAX can be plugged in only when your site / blog is PHP compatible. Else, it is useless..
As far as I can see, most of the examples listed use Ajax. They are all using JavaScript to do very clever things but very few of them are making calls to the server once the page is loaded.
Any chance you could amend the title of this page to clarify this? There’s enough FUD floating around the term Ajax without further fudging.
Interesting, but I would have thought that most navigation tabs behaviour could be managed through JavaScript without the complications of AJAX. I’m not saying there is anything wrong with using AJAX for this sort of thing, just that it could introcue unnecessary complication. It’s horses for courses.
Thanks for the links…I’d go for IdTabs
Awesome post. Love it!