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
- Ajaxified Tabs Very simple Tabs from a linklist.
- Basic Tabs Unobtrusive tabbed UI from a simple static XHTML markup.
Features
- Unobtrusive behaviour, visitors with disabled JavaScript or old browsers can still navigate through your content.
- Simplified CSS and XHTML and behaviour-controlled CSS classes for complete styling control via sliding-doors or similar techniques.
- Generates tabs from existing XHTML structure by replacing that content.
- Requests and caches Ajax content on demand.
How to use
// Wait for the content ... window.addEvent('domready', { var container = $('my-tabs') new SimpleTabs(container, { selector: '.header' // every element with class .header is removed and added as tab }); });
Compatibility
Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 2+)
Requirements
MooTools JavaScript Framework
Download MooTools 1.2 with at least these modules:
- Fx.Tween
- Selectors
- Request.HTML
- DomReady (facultative)
Download
Changelog
- 1.1 (2008-05-07)
Public release for MooTools 1.2 - Support for static content and Ajax requests - Simplified CSS and span’s to allow styling with sliding doors technique - Reads tab content from existing XHTML markup
License
All files are © 2008-2009 by Harald Kirschner and available under the MIT License.
Contact & Discussion
For asking questions, requesting features, filing bugs or contributing other thoughts on this project use the support forum below. Before posting a new question, read through the documentation and the contributed notes for an answer. For problem reports make sure to add enough details like browser, version and a link or the relevant code.
You can contact me for non-support related notes.
Professional Support
I am available for hire if you look for professional and swift help. I can come to your rescue for installation, customization or extending the existing source for your needs.
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