Question

Sorry for this absolute noob question.
I am trying to implement Tabs with this MooTools Plugin:
http://mootools.net/forge/p/simple_tab_pane

The syntax for the constructor is as follows:

var myTabPane = new TabPane('tabs', { 
    tabSelector: 'li', 
    contentSelector: 'p' 
});

Where ‘tabs’ is the CSS-id of the container.

Now I would prefer to use a class for the container but ‘.tabs’ won’t work.
What would be the correct syntax for this?
And how should i do it to adress for example every div-Element ?

Answer 1

well first things first – what is expected:

https://github.com/akaIDIOT/MooTools-TabPane/blob/master/Source/TabPane.js#L44

he expects argument to be an element id or an actual element. how you arrive to that element is up to you.

var myTabPane = new TabPane(document.getElement('.tabs'), { 
    tabSelector: 'li', 
    contentSelector: 'p' 
});

passing an element found based upon a class search for .tabs.

alternatively, you can re-implement the initialize method on the class and write the line as:

this.container = document.getElement(container);
this.container.getElements(this.options.contentSelector).setStyle('display', 'none');

so you can then pass a jquery like selector: new TabPane('#someid') or new TabPane('div.someclass')

You’d refactor it by doing TabPane.implement({ initialize: fn(){... }) or do a subclass like var myTabs = new Class({extends: TabPane, initialize: fn(){ ... }). When you extend, this.parent() will call the parent method over the prototype.