Created By Adrian Statescu

AJAX Tabs based on prototype

This workshop we will be building a tabbed content browser that's Ajax powered. When ever a user clicks a tab the Ajax will communicate with the server and send back the appropriate data for that tab.

Lazy Loading

Tabs using prototype.js with option ajax content loading.

cancun panel
acapulco panel
negril panel: he script examples seen in the previous tasks have been short. At most they have been a couple of lines long. However, as your skills advance, you will likely build long, complicated scripts. To ensure that your scripts can be understood by other developers and also to help remind you of your own thinking when you return to your code after a period of time, you should insert comments into the code that explain why the code is designed the way it is.
cabo panel: To use this, you simply place any HTML for non-JavaScript browsers between opening and closing noscript tags. The following steps show how to embed a script in the body of a document and provide alternative HTML to display for non-JavaScript browsers:
source panel:
Event.observe(window,'load',function(){var tabSet = new ProtoTabs('tabSet',{defaultPanel: 'acapulco',
ajaxUrls:{cancun:'files/monede.php',
acapulco:'files/book1.php',
negril:'files/book2.php',
cabo:'files/book3.php',
}); }); //end obs