Accessible Ajax Tabs With MooTools
Ajax tabs (JavaScript tabs that only load tab content on request) have a couple problems:
- Can't be bookmarked.
- Search engines can't index the tab content.
- Inaccessible for users with JavaScript turned off.
They are, in many ways, frames for the web 2.0 generation. But they don't have to be. In this tutorial, I'll demonstrate how to make search-engine-friendly, handicap-accessible Ajax tabs using MooTools and PHP.
UPDATE: A new version of this script is now available.
Check out the demo or download the project files.
Note: This demo is written using the MooTools 1.2 Beta Release.
The trick to accessible JavaScript is to make your pages work without JavaScript - then add JavaScript on top. Easy, right?
Without JavaScript
Let's start by making a tabbing interface that uses query string variables to update the tabs. View the demo before JavaScript is added. Success! This takes care of bookmarking, search engines, and users with JavaScript turned off. Now let's add some Ajax magic.
With JavaScript
View the demo after JavaScript is added.
The JavaScript needs to:
- Modify the tab links.
- Activate the tab and make an asynchronous request.
Modify the tab links
First we stop regular link events. Otherwise, the user's web browser will just link to the query string variables as it does with JavaScript turned off. Then we add a JavaScript event to the tabs, passing the ID of the tab to a function.
- window.addEvent('domready', function(){
- $('tabs-nav').getElements('li').each(function(i) {
- i.addEvent('click', function(event){
- event.stop();
- Tab(i.get('id'));
- });
- });
- });
Activate the tab and make an asynchronous request
Since we don't know the ID of the previously active tab, we go through all of the tabs and remove the CSS class that visually highlights them (a class called "active"). Then we simply add the highlight class to the tab ID that was clicked.
We're going to use that same ID to pass to our Ajax page. For this example, the tab content is hard-coded but you could certainly make it load from your database.
While we're waiting for a response we're going to add a loading icon, or throbber. In the markup, I added a reference to the throbber gif - just so it's pre-loaded in the DOM in time for the JavaScript action. If we don't pre-load, depending on the web browser, an empty image box may appear and we don't want that. Incidentally, Ajaxload is a great resource for loading animations.
- function Tab(key){
- $('tabs-nav').getElements('li').each(function(i) {
- i.removeClass('active');
- })
- $(key).addClass('active');
- var req = new Request({
- url: 'tab-change.php?tab=' + key,
- method: 'get',
- onRequest: function() {
- $(key + '-loading').set('html', '<img src=\'images/Ajax-loader.gif\' width=\'16\' height=\'16\' alt=\'Loading\' />');
- },
- onSuccess: function(responseText) {
- $(key + '-loading').setHTML("");
- $('tabs-content').setHTML(responseText);
- }
- }).send();
- }
Final Thoughts
JavaScript tabs can be extremely useful when screen real estate is at a premium. Your decision to use traditional JavaScript tabs, which simply hide or show content when clicked, versus Ajax tabs, which call back to the server to load their content, should be carefully considered. My recommendation is to use Ajax tabs when the tab content is high in file size, particularly images, but your mileage may vary.
Comments