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!
-
I thought about something like that ... but should I copy the className from the element? Or give the tab element a unique id. Until I added that option you can use the onAdded event to add your classname or id.
-
The old tab plugin with mootools1.1 was better. What happened, did you get caught up in the hype of the new? Mootools 1.2 isnt production ready yet so why bother...
-
Since I'm in the MooTools developer team, the hype really caught a long time ago ;-) and 1.2 release is in sight. The old (very old) tab widget was just a conversion, was bloated with unnecessary, and had a bad API.
-
Your widget is great, im anxious to see the new 1.2 compatible release.
I'd like to suggest some new features:
* Removable Tabs (destroy the tab and posible the div too)
* Editable Tags (a method or property to edit the title and class of the tab)
CHeers -
Nice!
-
could someone please help me with making a fade transition between the menu items? or a link to something that can help? cheers
-
Would it be possible to get the tabs to be located beneath the content container?
-
yep: in the .js file, have a look for
/**
* Constructor
*
Inside, around the last lines of this section, seek for something like
this.element.empty().adopt(this.menu).adopt(this.wrapper);
(not exactly, but "adopt" and "this.menu" and "this.wrapper" should occur). This line "glues" the tabs and the showcase togesther, so swap this.menu and this.wrapper.
.adopt(this.menu).adopt(this.wrapper);
should get
.adopt(this.wrapper).adopt(this.menu);
Hope this helps. -
Thanks Adrian, I'll give this a shot soon here. Appreciate the help.
-
hello! first of all - thank you for your work you're sharing!
I'm trying to make some changes to this plugin. I want to make one more div inside of tab-content, but can't do that. Is there any chance you can help me with that?
thank you! -
excuse me, made a mistake. I would like to create div (non refreshing by ajax) in tab-wrapper along with ul.tab-menu and div.tab-wrapper.
-
Please help, how should I put two sets of basic tabs into one website? I want to have tabs in two seperated places, with other css styles too.
Please help. -
in the post should be -> window.addEvent('domready', function() {
-
I have a problem with your "Ajaxified Tabs". When the return content on ajax request is big like more than 500 html lines, the integration in the dom is very very long. The ajax request is very fast, the return too, but just after when the javascript make the integration in the dom there is a break time during 30s to 1mn (more html line more this time is long). This problem is on IE6. In firefox all is ok is fast. I don't find why, thanks for your help.
-
I can't figure this out, what am I supposed to replace the div tag with. The CSS is linked as well an the content isn't changing. What am I doing wrong?
-
Hi,
thanks for this - i am trying to understand and learn from it.
i have a question cencerning the Ajaxified Tabs sample:
When the external content is loaded and i make a browser refresh - than the content moved down for mor than ?? pixels.
This happens locally (xampp) and on this demo site - with IE7 only (windows).
Thanks for an idea and
greetings from germany
-
Anyone have same problem ? digitarald can you help me ?
I have a problem with your “Ajaxified Tabs”. When the return content on ajax request is big like more than 500 html lines, the integration in the dom is very very long. The ajax request is very fast, the return too, but just after when the javascript make the integration in the dom there is a break time during 30s to 1mn (more html line more this time is long). This problem is on IE6. In firefox all is ok is fast. I don’t find why, thanks for your help. -
impossible to find the problem !!! anyone have it ? an idea to fix it ?
-
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!
how can I style the tabs in different ways? like giving a different icon to every tabs.
I've tried to add a class to the link inside each **li** of tab block... but this class is lost in build function. I can solve this problem passing the class of the link to addTab and then adding the class to the attributes in new Element inside addTab... obviously modifying your code... is there another way?
thnaks