SimpleTabs - Unobtrusive Tabs + Ajax (v1.0)

Small, simple and unobtrusive Tab plugin for MooTools including support for Ajax content. Overlays semantic XHTML markup with a tabbed interface without additional changes. Customise the style and behaviour by changing the simplified CSS or via various custom Events.

Showcases:

Showcase “Ajaxified Tabs”

Very simple Tabs from a linklist.

The Action Happens Here

Content via Ajax

JavaScript & MooTools

window.addEvent('domready', function() {
 
	/**
	 * This one has links with href's, taken as ajax content (take a look at firebug!)
	 */
	new SimpleTabs($('demo-ajax'), {
		selector: 'li a'
	});
 
	/**
	 * This is in another tab block and defines overrides the default event
	 * for onShow with an opacity animation.
	 *
	new SimpleTabs($('tab-block-3'), {
		entrySelector: 'h6',
		onSelect: function(toggle, container) {
			toggle.addClass('tab-selected');
			container.effect('opacity').start(0, 1); // 1) first start the effect
			container.setStyle('display', ''); // 2) then show the element, to prevent flickering
		}
	});
	*/
 
});

XHTML Markup

<h3>Content via Ajax</h3>
 
<div id="demo-ajax">
	<ul>
		<li><a href="content1.html">Arts</a></li>
		<li><a href="content2.html">Biography</a></li>
		<li><a href="content3.html">Geography</a></li>
		<li><a href="content4.html">History</a></li>
	</ul>
</div>
 

CSS Stylesheet

/**
 * Nice css for the ajax stuff
 */
.tab-wrapper .tab-ajax-loading
{
	padding:				100px 0;
	background:				url(images/spinner.gif) no-repeat center;
}

This example and the accompanying sources/assets are © 2008-2009 by Harald Kirschner and available under The MIT License. For debugging and profiling the scripts and their markup download Firefox and use addons like Firebug and Web Developer Toolbar.

Share it: Stumble it!Digg This!del.icio.us (No Posts)

discussion by DISQUS No Comments

Please use the support forums for discussing the project, asking questions or posting bug-fixes!

Sort:
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last

Post your comment

Please use the support forums for discussing the project, asking questions or posting bug-fixes!


Internet Consultant & Contractor

I'm available to combine forces with you and your team to find the most simple, elegant and convenient web solutions . I await your call.

If you just like my work and want to say Thank You, donate via PayPal or Amazon Wish List.

Developer Resources & Tools