How to create Ajax Tabs – 7 Must See Tutorials For Newbie Ajaxians

1. Ajax Project – 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 pagetab to pagetab without a page refresh? Here’s an example of a tabbed interface using Ajax to load the new pages.

We are going to use the AHAH functions described in the Metatag Grabber project to implement the interface.

2. Sweet AJAX Tabs With jQuery 1.4 & CSS3

Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. This allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.

Today we are making an AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery

3.  Nesting Ajax Tabs

It’s possible to have nested Ajax Tabs. That is to say, the external page fetched by one of the tabs can in itself contain a new Ajax Tabs Content instance that loads other content when clicked on.

4. ASP.Net AJAX Tab Control Extender

AJAX Tab Control Extender also belongs to ASP.Net AJAX Control toolkit library provided by Microsoft’s official open source community. AJAX Tab control extender provides the functionality to display the multiple things on a single web page in the form of tabs.

5. Ajax Tabs Content Script (v 2.2)

his is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab (ie: when page is reloaded), an “IFRAME” mode, a “slideshow” mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more.

We got our inspiration for this script from Yahoo’s homepage, which employs such a concept to show news in an organized fashion.

6. Accessible Ajax Tabs With MooTools

In this tutorial, I’ll demonstrate how to make search-engine-friendly, handicap-accessible Ajax tabs using MooTools and PHP.

7. Simple Tabs with AJAX and jQuery

One of the great things about jQuery is its complete suite of built in AJAX functions, which allow you to add quick and easy features to your website.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.