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
Middle Part
The End
And the Story goes on!
Ocunoms oseivols
Klu mutoms
Ilelilom olabol
Do neodons
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.
39 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
-
Hi
Great little plug in for Mootools.
Does it support flash within the tabbed area? The flash appears ok if I load the page by itself but within a tab I just get the background of the div container. If I remove the div nothing appears.
Cheers
Colin
Isle of Man (UK) -
Hi
Not to worry, I went back to the original <object and="" classid...="" colin="" for="" not="" now.="" only="" runactivecontent="" script="" the="" thx="" using=""></object>
-
Hi
I'me Testing SimpleTabs and did not find how to set a default Selected item using Server Side Code. Can you help? -
Hi
I have the same question like Mike (6 monts ago)Putting two sets of basic tabs into one page?
Please help.
Thanx -
Solved
Just rename the tab and selector
new SimpleTabs('', {
selector: 'h2' -
Hi! Thanks for your script, it's just what I needed! I've only added support for preselction of tabs by url: http://paste.mootools.net/f3bc...
-
impresive
-
How to make the browser remember which Tab is selected:
[+Add to very top of the code]:
var selectedTab = Cookie.read('selectedTab');
if (!selectedTab) { selectedTab = 0; }[+Add to Line 120]:
var cookie = Cookie.write('selectedTab', index, {duration: 30});[=Change (Line 23)]:
show: 0,[To this]:
show: selectedTab, -
for my css design i need to specify last element.
is it possible ?
thanks -
Let me start by saying that I love this script! I've implemented it here: http://www.ridebooker.com/book...
Could anyone please give a hint as to how I could open a tab using a text link on the page that is outside the tab?
-
Hello Casey, did you find a way to open a tab from a text link in another tab? I'm having the same problem..
Thanks a lot!
-
Hi, would it be possible to mix the tabs, ie to have one tab retrieved via ajax and one by inline code?
Thanks! -
Hi, first of all: nice work and great site!
I was wondering whether anyone could give me an idea about the following:
I've tested the SimpleTabs component and it works well (one page and using the 'domready' functionality.When I try to use mootools/ajax to dynamically load parts of a webpage based on the users selections, I can't get the tabs to be "formed/recognized" anymore. Is there a way I can invoke the process to form the tabs?
Regards
Jiri -
Have you found a solution yet? I'm looking foe help for the same kind of issue. Thanks!
-
Is there anyway to select which tab is active on the load?
-
Is there any way to get the tabs to load 'tabbed'? Currently it seems that the content all loads and then gets tabbed a few seconds later.
-
i seem to have an issue with google maps being off-centred when in a 2nd-or-higher tab in mac firefox 3...
demo:
http://www.splitlife.com/mapsAny ideas? Thanks for the great scripts btw
-
Hello Harald,
I'm trying to use your code on a website I'm developping, however it's not working properly. It generates the div tab-wrapper, but it doesn't show anything, neither the tab-menu nor the content. It's all blank. I tested on firefox 2 &3, IE 6 & 7. The same thing happens in all of them. Firebug says it's all right.
Could you please, take a look at it?
The html.
The css.
The script.
Thanks in advance, -
hi, thanks for this script! i've have an issue though with google maps, when it's in the 2nd-or-more tab, the map is moved. this is only in the old script (waiting on other scripts to upgrade before I move to mootools 1.2...), so I guess you might know a quick css/other fix?
demo of issue: http://www.splitlife.com/maps
thanks!
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
Hello Harald,
I'm trying to implement your really nice Showcase “Ajaxified Tabs” with Slideshow2 and i have some trouble cause Slideshow2 use also the mootools core but don't have all the function. So when i tried to load a second time the mootools core with the functions requested for you Showcase Ajaxified Tabs i got bug on the Showcase, it doesn't load the html file...
Can you please help me?
Thanks in advance,
Erik