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 “Basic Tabs”

Unobtrusive tabbed UI from a simple static XHTML markup.

The Action Happens Here

Beginning

Nu hahta nuquéra oio. Sa yulma rotelë axa, ama ma aratar cenvéla, mi terca cuilë mat. Be hérincë úquétima atalantëa tul, cé vaxë celë avá. Mer oa ainu raita, san as tata talta rotelë. Milya aicassë terpellië tir na, us cen raxë lasta carcassë, cu nimba carcassë iel. Rip at minda murmë avamarwa. Tasar nalanta ata cu, suhto mettarë yen or. Ma luinë linwelë maquetta cua, é tyávë hísië sir. Mantil cuivië pel en, be nor alqua caima fairë. Nu can rambë yulda, tam quén rámië anwavë nó. Cen nasta wilwarin an. Nu rondë entarda pel, axa tasar sairon nu. Hala halda orosta nís us, rondë turma nauva et sai. Ar tië yaru eques. Us ettë nolya pereldar lia, as vanima atalantëa etéraettul ëar. Cuilë quesset an árë.

Middle Part

Aman ollo oa áva, occo onótima túr ré, ep pio linwelë andamunda. Erya heru ai ván, felmë cenda onótima et apa, nurmë teren raica nór vá. Lasta ontani nahamna be col, oa mir hwarma tareldar, ana yá heru velca. Ser na aratar haloitë, laito vanima ep ana. Inqua palmë orosta órë or, óla tussa luhta tó, ílë nurtalom nainanyéna nú. Aha linga teletelya silninquita yá. Lár sa milya etéraettul, oa ehtë fassë elendë axo, pé enga fassë centa ran. Mer na nírë aiquen carcassë, cú ván vaxë nessa leryalehtya, men lenca ataqua avatyara ve. Núta soron torma tir vá, vá yarë tumna fum, é tul mavor hanta ambalë. Alqua foina etelotya uë lir, harë mitya cú yúl. Mi yúl laira vilya, sa sondë raita carca vai. Sí lis raita calya, ep tixë alahasta íta. Ser suhto laira ya, nir eques vëaner ma, rá vaina faina sar. Her nahamna yernacolla oa. Sië ai mettarë wilwarin lindelëa. Yanen foina calina ve lau. Má cëa occo amorta tellaurë, to car manu telco hyarmenya. Lú fion hecil rámië hón.

The End

Palmë lindelëa cu írë. Nan us aiwë ronyo. Uë cíla pahta palúrë úrë. Sa ainu nurmë yat, tó hap palis sanda valarauko, be ílë norna yulma terpellië. Vairë lingwë lir ré. Simpina mirilya ta yen. Yá apa lappa vórima, nat ainu valinor sa. Eru us tata canta, ep rauko onótima vén. Fëa liptë calpa tareldar an, axa yá varta amorta hantalë. Raica nonwa indómë as wén, cala onótima an hón. Et poica sundo axa, mól cé caima pelentul. Fánë talta tol rá. Mi oio tihta cotumo arandur, núta lorna teletelya rin nó. Sir heru hérë er, her ve tanga calta, lia uë orva mírëa artaquetta. Úvë pé hamba leuca voronwë, hanta tella nostalë men sí. Harna antorya ambarmetta et caw, low tó lauta ohtatyaro. Arca rimpë nurtalom nó nén. Quén carca mornië er áya, an rië tárië mirilya andamunda. Assa tanga terenë tec to, nu lia nirya tundo tellaurë. Vá ollo valta rotelë cor. Táp rámië valdë né. Ataqua amaurëa be net. Sú nur tussa mantil.
And the Story goes on!
Ocunoms oseivols
Ocunoms oseivols ix ünü, deg ed böniälik litik. Benomeugik ehürom olabol ob tim. Folmilanas pöfans tils bi bai, atim faemik lonem mid ob. Va iui evisitobs-li nedons olenükobs-li, odeidoy oflapons osämikebobs sal vü, daifafideds elovegivol in nog? Mot domi pimotom pomiserons tä. Dunolsöd evilob seaton et tab, bü sog cödale fenols tälen, onotodob simulans vokom änu ba? Oni binob klotas kälälolsöd fo! Val bimas sevob vinig de. Bai elovegivol kludo plökön dü, nes üf bibinolavanas binob kömon.
Klu mutoms
Klu mutoms natädik ix, is nos neföro ogidükons! Alik palelifükons mäl da. Ata on jänom kohorti pödeidom, mäl jafal koldik osufom ko. Fasilikum smalikanas sofälik deg pö, üf cunons lönedos picütom mäl. Mö güä podesumon pömotom, bal frutabik letuvatam osagölo ka? Sid disi taik vitidabälis bo, hidünans setirob obs ut, oki nemödiko palelifükons mö? Böniälik lelifikam nevobiko moö is! Dü ofidobs-li omis otrovon sis, düp ko ravanaspadädi stagi. Düp ok doati fatüitolsöd pöfölonös, doati ebalädikol-li löfons et höl.
Ilelilom olabol
Ilelilom olabol igo nu, gönü isio lananis ol mal! Olik sagol ga sil? Evilob neflenis viens ni tep, obinofs omis ba bod? Bem blufön magot fe, do nek fodob kludo, cedolsöd eperon esasenols me lul. El dekömomöd isio mudi deg. Sid sagol-li tils ed, beg se lägüptän plekonsöv unoädol, ok län eprimols fladili. Xil fasilikum nästön ko. Ix oma dugan nosükön säsinamasakrifoti. Su esovob pöfölonös simulan mel, ünü alutosi badikans kildeg fo, bi barak blinön palovegivom fol.
Do neodons
Do neodons pöfans unoädol bem, di num ilelilom logom. Zif drinom sejedon ai, tä hetons vomi votan sil. Iui kohorti kultans ofredon so, nog me ostetob sagolsöd sukubons. Jigok mastan padeidön bos va, pos si gididols ocälob verat! Klotas mimesed taläntis asä gö, dub ba gesagolsöd kilas temunods, obi dalabom fanön nedons dü. Binolsös ioatham ata et, osavom tefü lä rid. Nö lio edüfälikon pijuniselanas sepülön, kis neföro purgator tä? Vü eli bligi vitidabälis. Farisetanas obinomöd spearükon mel tä, if vil daniel isufof löfons? Da maf osagob piklänedon, dekömomöd klotis kupriniki asa ob? Sid su kelos leitik neodols?

JavaScript & MooTools

window.addEvent('domready', function() {
 
	/**
	 * Element with id 'demo-block' is the container and all h4-elements
	 * inside are fetched as tab headers. The following elements are their
	 * content.
	 */
	var tabs = new SimpleTabs('demo-block', {
		selector: 'h4'
	});
 
	/**
	 * 3rd tab as another tabbed UI inside
	 */
	new SimpleTabs('demo-block-inside', {
		selector: 'h6'
	});
 
	/**
	 * Anchors with # are not unobtrusive, its only for showing the addTab method
	 */
	new Element('a', {
		'href': '#',
		'text': 'Add another tab',
		'title': 'Adds a new customised tab to the end of the row.',
		'events': {
			'click': function() {
				var name = prompt('Please provide name for the tab') || 'No-Name';
				tabs.addTab(
					name, // text
					'Added Tab with name "' + name + '"', // title
					new Element('div', {'html': 'Content for tab <strong>"' + name +'"</strong>'}) // Element or URL
				);
				return false; // cancel the click
			}
		}
	}).inject(tabs.element, 'after');
 
});

XHTML Markup

<div id="demo-block">
	<h4 title="Just a warum-up ...">Beginning</h4>
	<div>
		Nu hahta nuquéra oio. Sa yulma rotelë axa, ama ma aratar cenvéla, mi terca cuilë mat. Be hérincë úquétima atalantëa tul, cé vaxë celë avá. Mer oa ainu raita, san as tata talta rotelë. Milya aicassë terpellië tir na, us cen raxë lasta carcassë, cu nimba carcassë iel. Rip at minda murmë avamarwa. Tasar nalanta ata cu, suhto mettarë yen or.
		Ma luinë linwelë maquetta cua, é tyávë hísië sir. Mantil cuivië pel en, be nor alqua caima fairë. Nu can rambë yulda, tam quén rámië anwavë nó. Cen nasta wilwarin an.
		Nu rondë entarda pel, axa tasar sairon nu. Hala halda orosta nís us, rondë turma nauva et sai. Ar tië yaru eques. Us ettë nolya pereldar lia, as vanima atalantëa etéraettul ëar. Cuilë quesset an árë.
	</div>
 
	<h4 title="The best Lorem Ipsum ever!">Middle Part</h4>
	<div>
		Aman ollo oa áva, occo onótima túr ré, ep pio linwelë andamunda. Erya heru ai ván, felmë cenda onótima et apa, nurmë teren raica nór vá. Lasta ontani nahamna be col, oa mir hwarma tareldar, ana yá heru velca. Ser na aratar haloitë, laito vanima ep ana. Inqua palmë orosta órë or, óla tussa luhta tó, ílë nurtalom nainanyéna nú. Aha linga teletelya silninquita yá.
		Lár sa milya etéraettul, oa ehtë fassë elendë axo, pé enga fassë centa ran. Mer na nírë aiquen carcassë, cú ván vaxë nessa leryalehtya, men lenca ataqua avatyara ve. Núta soron torma tir vá, vá yarë tumna fum, é tul mavor hanta ambalë. Alqua foina etelotya uë lir, harë mitya cú yúl. Mi yúl laira vilya, sa sondë raita carca vai. Sí lis raita calya, ep tixë alahasta íta. Ser suhto laira ya, nir eques vëaner ma, rá vaina faina sar.
		Her nahamna yernacolla oa. Sië ai mettarë wilwarin lindelëa. Yanen foina calina ve lau. Má cëa occo amorta tellaurë, to car manu telco hyarmenya. Lú fion hecil rámië hón.
	</div>
 
	<h4 title="Here is another tab!">The End</h4>
	<div>
		Palmë lindelëa cu írë. Nan us aiwë ronyo. Uë cíla pahta palúrë úrë. Sa ainu nurmë yat, tó hap palis sanda valarauko, be ílë norna yulma terpellië. Vairë lingwë lir ré. Simpina mirilya ta yen.
		Yá apa lappa vórima, nat ainu valinor sa. Eru us tata canta, ep rauko onótima vén. Fëa liptë calpa tareldar an, axa yá varta amorta hantalë. Raica nonwa indómë as wén, cala onótima an hón. Et poica sundo axa, mól cé caima pelentul. Fánë talta tol rá.
		Mi oio tihta cotumo arandur, núta lorna teletelya rin nó. Sir heru hérë er, her ve tanga calta, lia uë orva mírëa artaquetta. Úvë pé hamba leuca voronwë, hanta tella nostalë men sí. Harna antorya ambarmetta et caw, low tó lauta ohtatyaro. Arca rimpë nurtalom nó nén. Quén carca mornië er áya, an rië tárië mirilya andamunda.
		Assa tanga terenë tec to, nu lia nirya tundo tellaurë. Vá ollo valta rotelë cor. Táp rámië valdë né. Ataqua amaurëa be net. Sú nur tussa mantil.
 
		<h5>And the Story goes on!</h5>
		<div id="demo-block-inside">
			<h6>Ocunoms oseivols</h6>
			<div>
				Ocunoms oseivols ix ünü, deg ed böniälik litik. Benomeugik ehürom olabol ob tim. Folmilanas pöfans tils bi bai, atim faemik lonem mid ob. Va iui evisitobs-li nedons olenükobs-li, odeidoy oflapons osämikebobs sal vü, daifafideds elovegivol in nog?
				Mot domi pimotom pomiserons tä. Dunolsöd evilob seaton et tab, bü sog cödale fenols tälen, onotodob simulans vokom änu ba? Oni binob klotas kälälolsöd fo! Val bimas sevob vinig de. Bai elovegivol kludo plökön dü, nes üf bibinolavanas binob kömon.
			</div>
			<h6>Klu mutoms</h6>
			<div>
				Klu mutoms natädik ix, is nos neföro ogidükons! Alik palelifükons mäl da. Ata on jänom kohorti pödeidom, mäl jafal koldik osufom ko. Fasilikum smalikanas sofälik deg pö, üf cunons lönedos picütom mäl. Mö güä podesumon pömotom, bal frutabik letuvatam osagölo ka?
				Sid disi taik vitidabälis bo, hidünans setirob obs ut, oki nemödiko palelifükons mö? Böniälik lelifikam nevobiko moö is! Dü ofidobs-li omis otrovon sis, düp ko ravanaspadädi stagi. Düp ok doati fatüitolsöd pöfölonös, doati ebalädikol-li löfons et höl.
			</div>
			<h6>Ilelilom olabol</h6>
			<div>
				Ilelilom olabol igo nu, gönü isio lananis ol mal! Olik sagol ga sil? Evilob neflenis viens ni tep, obinofs omis ba bod? Bem blufön magot fe, do nek fodob kludo, cedolsöd eperon esasenols me lul.
				El dekömomöd isio mudi deg. Sid sagol-li tils ed, beg se lägüptän plekonsöv unoädol, ok län eprimols fladili. Xil fasilikum nästön ko. Ix oma dugan nosükön säsinamasakrifoti. Su esovob pöfölonös simulan mel, ünü alutosi badikans kildeg fo, bi barak blinön palovegivom fol.
			</div>
			<h6>Do neodons</h6>
			<div>
				Do neodons pöfans unoädol bem, di num ilelilom logom. Zif drinom sejedon ai, tä hetons vomi votan sil. Iui kohorti kultans ofredon so, nog me ostetob sagolsöd sukubons. Jigok mastan padeidön bos va, pos si gididols ocälob verat! Klotas mimesed taläntis asä gö, dub ba gesagolsöd kilas temunods, obi dalabom fanön nedons dü.
				Binolsös ioatham ata et, osavom tefü lä rid. Nö lio edüfälikon pijuniselanas sepülön, kis neföro purgator tä? Vü eli bligi vitidabälis. Farisetanas obinomöd spearükon mel tä, if vil daniel isufof löfons? Da maf osagob piklänedon, dekömomöd klotis kupriniki asa ob? Sid su kelos leitik neodols?
			</div>
		</div>
 
	</div>
 
</div>
 

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