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
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.
Keywords:
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 classid... only and not using the RunActiveContent script for now.
Thx
Colin -
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/f3bc6d040
-
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/airports/yvr/whi...
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/maps
Any 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!
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