Control Tabs David Rowland What is Control Tabs
Control. Tabs David Rowland
What is Control. Tabs? l l A Java. Script library for creating tabs within your web page Extends Prototype Uses elements and anchors so browsers that don’t support Java. Script will still enable use of the tags http: //livepipe. net/projects/control_tabs/
Initializing Your Tabs tabs = new Control. Tabs($(‘my_tabs’)); Creates a new set of tabs with no properties
Initializing Your Tabs tabs = new Control. Tabs($('my_list_of_tabs'), { default. Tab: 'first', //can be "first", "last", or one of the link objects inside of the tab list link. Selector: 'li a', //(CSS selector) anchors inside list items is the default active. Class. Name: 'active', //when a link is clicked this class name is added before. Change: function(control_tabs_instance, old_container){ //this is called after the link is clicked but before the tabs have changed }, after. Change: function(control_tabs_instance, new_container){ //this is called after the link is clicked and after the tabs have changed }, auto. Link. External: true //link anchors outside the list that point to tab containers });
Control. Tabs functions l l l set. Active. Tab() next() previous() first() last()
set. Active. Tab() if(typeof(link) == "undefined" || link == false) return; if(typeof(link) == "string"){ this. links. each(function(_link){ if(_link. key == link){ this. set. Active. Tab(_link); throw $break; } }. bind(this)); }else{ this. containers. each(function(item){ item[1]. hide(); }); this. links. each(function(item){ item. remove. Class. Name(this. options. active. Class. Name); }. bind(this)); link. add. Class. Name(this. options. active. Class. Name); this. options. before. Change(this, this. active. Container); Control. Tabs. notify. Responders('before. Change', this. active. Container); this. active. Container = this. containers[link. key]; this. active. Link = link; this. containers[link. key]. show(); this. options. after. Change(this, this. containers[link. key]); Control. Tabs. notify. Responders('after. Change', this. containers[link. key]); }
next() this. links. each(function(link, i){ if(this. active. Link == link && this. links[i + 1]){ this. set. Active. Tab(this. links[i + 1]); throw $break; } }. bind(this));
previous() this. links. each(function(link, i){ if(this. active. Link == link && this. links[i - 1]){ this. set. Active. Tab(this. links[i - 1]); throw $break; } }. bind(this));
first() this. set. Active. Tab(this. links. first());
last() this. set. Active. Tab(this. links. last());
Questions?
- Slides: 11