An old tab script
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
File: TabHelper class | |
Version: 1.0 | |
Desc: This class helps to build tabs on a page using lightweight markup and two HTML classes. | |
Tested in IE6+, Firefox 1.0+ and Opera 9+. Needs to be tested in Safari 1.3+ | |
Requires: /pages/v4/script/dhtml_lib.js | |
Use: To use the functions found in this file, start with simple markup: | |
<div class="tabs"> | |
<[h3 or another tag] class="tab" id="[id name]">[Heading]</h3> | |
<p>Content here in whatever tags you want. Feel free to nest infinitely.</p> | |
<[h3 or another tag] class="tab" id="[another id]">[Another Heading]</h3> | |
<ul> | |
<li>More content</li> | |
<li>In any format</li> | |
</ul> | |
</div> | |
Instantiate: | |
new TabHelper([param]) allows you to specify which tab index you want open by default. | |
The default if not specified is the first tab, or 0. If the index doesn't exist, all of them will be hidden | |
If you want an easy default implementation, just add a window load event to call TabHelper_AutoInit() | |
Then write CSS to style the tabs. Don't forget to specify display property for the class ".tab-hidden". | |
Author: Eric Shepherd | |
Date: December 2006 | |
Methods: The following methods are in this class. | |
init(container element) | |
Builds an unordered list from the headings in the container element | |
Builds an array of content sections from the content under each heading | |
Inserts the list into the parent element | |
Inserts the sections into the parent element | |
Sets the default active tab per the parameter (if any) passed into the constructor | |
findTabHeadings(container element) | |
Returns a node list of any elements with a class of "tab" inside the container | |
buildList(container element) | |
Parses through container looking for tags with class "tab" | |
Loops through these tags, pulling out text and pushing into new <li> elements | |
Returns an unordered list of these tab headings with the id of the heading | |
Adds event listener to the newly created links on each tab (calls showHide) | |
buildTabContainers(container element) | |
Creates a new sections array | |
Parses through element, beginning at heading and pushing nextSiblings into the array | |
Loop stops when another heading or the end of the container section is reached | |
showHide(link, container element, event) | |
Gets the anchor link which was clicked, adds hidden class to all tab sections | |
Returns the <a> tag from storage to the previously selected tab | |
Removes hidden class from selected tab, activates the tab to remove the <a> tag | |
Cancels default link action | |
setDefaultActiveTab(container element) | |
Sets the first tab to be active by retrieving the tab and calling DomHelper.ActivateElement | |
deactivateElements(container element) | |
Calls DomHelper.DeactivateElement for all list items which are activated in the tab set | |
Version History: | |
0.9 EBS Created | |
1.0 EBS Launch version, tested and implemented | |
*/ | |
// Constructor | |
// Pass in the tab number which should be active | |
function TabHelper(openDefault) | |
{ | |
this._openTab = (openDefault != null) ? openDefault : 0; | |
this._tabKeyword = 'tab'; | |
this._tabHiddenClass = 'tab-hidden'; | |
this._tabListClass = 'tab-list'; | |
this._activeClass = 'active'; | |
} | |
// Public Accessors | |
TabHelper.prototype.SetOpenTab = function(value) { | |
this._openTab = value; | |
} | |
TabHelper.prototype.SetTabKeyword = function(value) { | |
this._tabKeyword = value; | |
} | |
TabHelper.prototype.SetTabHiddenClass = function(value) { | |
this._tabHiddenClass = value; | |
} | |
TabHelper.prototype.SetTabListClass = function(value) { | |
this._tabListClass = value; | |
} | |
TabHelper.prototype.SetActiveClass = function(value) { | |
this._activeClass = value; | |
} | |
// Storage variable for activated tab link to chill until needed again | |
TabHelper.prototype.tabStorage = null; | |
// Function: init | |
// Builds the unordered list of tab options and inserts into the document | |
// Parameters: | |
// parent - the HTML element that contains the tab content | |
// Returns: | |
// void | |
TabHelper.prototype.init = function(parent) | |
{ | |
if (!SupportTest.hasDom) return; | |
thisList = this.buildList(parent); | |
sections = this.buildTabContainers(parent); | |
parent.appendChild(thisList); | |
for (var i=0; i<sections.length; i++) { | |
parent.appendChild(sections[i]); | |
} | |
this.setDefaultActiveTab(parent); | |
} | |
// Function: findTabHeadings | |
// Finds the headings in the HTML and returns an array of elements | |
// Parameters: | |
// parent - the HTML element that contains the tab content | |
// Returns: | |
// void | |
TabHelper.prototype.findTabHeadings = function(parent) | |
{ | |
return DomHelper.GetElementsByClassName(this._tabKeyword, null, parent); | |
} | |
// Function: buildList | |
// Accepts an element, calls findTabHeadings, and returns an unordered list with nav items | |
// Parameters: | |
// parent - the HTML element that contains the tab content | |
// Returns: | |
// an unordered list element containing the navigation items | |
TabHelper.prototype.buildList = function(parent) | |
{ | |
// get each item with class "tab" in the current section | |
var headings = this.findTabHeadings(parent); | |
// create list and items array | |
var list = document.createElement('ul'); | |
list.className = this._tabListClass; | |
// loop through headings, push text into list | |
for (var i=0; i<headings.length; i++) { | |
var text = headings[i].firstChild.nodeValue; | |
var itemId = headings[i].id.length > 0 ? headings[i].id : ''; | |
var newLi = document.createElement('li'); | |
// create the link and text node | |
var newLink = document.createElement('a'); | |
var newText = document.createTextNode(text); | |
newLink.setAttribute('href', '#' + headings[i].id); | |
// append text to link, set attributes and append the whole thing into the new list item | |
newLink.appendChild(newText); | |
var thisId = this._tabKeyword + '-' + headings[i].id; | |
newLi.setAttribute('id', thisId) | |
newLi.appendChild(newLink); | |
// add the event | |
var thisReference = this; | |
EventHelper.AddEvent(newLink, 'click', ptr = function(e) { thisReference.showHide(this, parent, e); }, false); | |
// push the new list item into the ul | |
list.appendChild(newLi); | |
} | |
return list; | |
} | |
// Function: buildTabContainers | |
// Finds the tab headings, parses through them and creates divs with meaningful ids while removing the headlines | |
// Parameters: | |
// parent - the HTML element containing the tab content | |
// Returns: | |
// an array of div elements with the tab content | |
TabHelper.prototype.buildTabContainers = function(parent) { | |
// get each item with class "tab" in the current section | |
var headings = this.findTabHeadings(parent); | |
// array to hold all sections | |
sections = new Array(); | |
// loop through headings | |
for (var i=0; i<headings.length; i++) { | |
// create new div and assign to array slot | |
var newDiv = document.createElement('div'); | |
sections[i] = newDiv; | |
// grab the node name of the heading | |
var theNodeName = (headings[i].nodeName); | |
// cycle through, grab nextSibling and push into div in array slot | |
while (headings[i].nextSibling && headings[i].nextSibling.nodeName != theNodeName) { | |
sections[i].appendChild(headings[i].nextSibling); | |
} | |
// get rid of heading after assigning id to the new div, add class of 'tab' to new sections | |
var thisId = headings[i].id; | |
headings[i].parentNode.removeChild(headings[i]); | |
sections[i].id = thisId; | |
DomHelper.AddClassName(sections[i], this._tabKeyword); | |
// hide all sections | |
if (this._openTab != i) { | |
DomHelper.AddClassName(sections[i], this._tabHiddenClass); | |
} | |
} | |
return sections; | |
} | |
// Function: showHide | |
// Shows and hides the tab divs based on link click events | |
// This method would have to be extended/overwritten to include an effect rather than a hidden class | |
// Parameters: | |
// theLink - the anchor element on each tab which receives the click event | |
// parent - the HTML element containing the tab content | |
// e - the click event on the tab | |
// Returns: | |
// void | |
TabHelper.prototype.showHide = function(theLink, parent, e) | |
{ | |
var theIds = theLink.toString().split('#'); | |
var section = theIds[1]; | |
var activatedElement = document.getElementById(section); | |
// add hidden class name to all elements | |
var headings = this.findTabHeadings(parent); | |
for (i=0; i<headings.length; i++) { | |
DomHelper.AddClassName(headings[i], this._tabHiddenClass); | |
} | |
// remove hidden class on active element and cancel following link | |
DomHelper.RemoveClassName(activatedElement, this._tabHiddenClass); | |
// deactivate all and then activate the element | |
this.deactivateElements(parent); | |
var tabId = this._tabKeyword + '-' + activatedElement.id; | |
var newTab = document.getElementById(tabId); | |
this.tabStorage = DomHelper.ActivateElement(newTab, this.tabStorage); | |
EventHelper.CancelDefault(e); | |
} | |
// Function: setDefaultActiveTab | |
// Sets the default active tab per index specified in constructor | |
// Parameters: | |
// parent - the HTML element containing the tab content | |
// Returns: | |
// void | |
TabHelper.prototype.setDefaultActiveTab = function(parent) | |
{ | |
var list = parent.getElementsByTagName('ul')[0]; | |
var items = list.getElementsByTagName('li'); | |
for (var i = 0; i<items.length; i++) { | |
if (i == this._openTab) { | |
this.tabStorage = DomHelper.ActivateElement(items[i], this.tabStorage); | |
} | |
} | |
} | |
// Function: deactivateElements | |
// Deactivates the active tab, placing the link into the static storage property | |
// Parameters: | |
// parent - the HTML element containing the tab content | |
// Returns: | |
// void | |
TabHelper.prototype.deactivateElements = function(parent) | |
{ | |
var list = parent.getElementsByTagName('ul')[0]; | |
var items = list.getElementsByTagName('li'); | |
for (var i=0; i<items.length; i++) { | |
if (items[i].className.match(this._activeClass)) { | |
DomHelper.DeactivateElement(items[i], this.tabStorage); | |
} | |
} | |
} | |
// Function: AutoInit | |
// Static auto-initializer. Either call this function on window load, | |
// or instantiate the TabHelper manually if you need more control. | |
// Auto-initializes any number of tab sets on a page | |
// Parameters: | |
// none | |
// Returns: | |
// void | |
TabHelper.AutoInit = function() | |
{ | |
// get all elements with class of "tabs" | |
var elements = DomHelper.GetElementsByClassName('tabs'); | |
// create new array to hold instances | |
instances = new Array(); | |
// loop through all elements with "tabs" class | |
for (var i=0; i<elements.length; i++) { | |
// create new TabHelper instance at iterator location | |
instances[i] = new TabHelper(); | |
// run init function for that particular instance, passing it the element at the iterator location | |
instances[i].init(elements[i]); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment