Control.Tabs

1
Control.Tabs

• David Rowland

2
What is Control.Tabs?

• A JavaScript library for creating tabs within
  your web page
• Extends Prototype
• Uses elements and anchors so browsers that dont
  support JavaScript will still enable use of the
  tags
• http//livepipe.net/projects/control_tabs/

3
Initializing Your Tabs

• tabs new Control.Tabs((my_tabs))
• Creates a new set of tabs with no properties

4
Initializing Your Tabs

• tabs new Control.Tabs(('my_list_of_tabs'),   
   
• defaultTab 'first', //can be "first", "last",
  or one of the link objects inside of the tab
  list    
• linkSelector 'li a', //(CSS selector) anchors
  inside list items is the default    
• activeClassName 'active', //when a link is
  clicked this class name is added    
• beforeChange function(control_tabs_instance,old_
  container)        //this is called after the
  link is clicked but before the tabs have
  changed    ,   
• afterChange function(control_tabs_instance,new_c
  ontainer)        //this is called after the
  link is clicked and after the tabs have
  changed    ,    
• autoLinkExternal true //link anchors outside
  the list that point to tab containers)

5
Control.Tabs functions

• setActiveTab()
• next()
• previous()
• first()
• last()

6
setActiveTab()

• if(typeof(link) "undefined" link false)
• return
• if(typeof(link) "string")
• this.links.each(function(_link)
• if(_link.key link)
• this.setActiveTab(_link)
• throw break
• .bind(this))
• else
• this.containers.each(function(item)
• item1.hide()
• )
• this.links.each(function(item)
• item.removeClassName(this.options.activeClassNam
  e)
• .bind(this))
• link.addClassName(this.options.activeClassName)
• this.options.beforeChange(this,this.activeContain
  er)
• Control.Tabs.notifyResponders('beforeChange',this
  ,this.activeContainer)

7
next()

• this.links.each(function(link,i) if(this.active
  Link link this.linksi 1)
• this.setActiveTab(this.linksi 1)
• throw break
• .bind(this))

8
previous()

• this.links.each(function(link,i)
• if(this.activeLink link this.linksi -
  1)
• this.setActiveTab(this.linksi - 1)
• throw break
• .bind(this))

9
first()

• this.setActiveTab(this.links.first())

10
last()

• this.setActiveTab(this.links.last())

11
Questions?