TAB TITLE HERE
TAB CONTENT HERE
*/
var showhide_tabs =
function(tabClass, tabContainer, searchTag, parentTagName, defaultTabPosition)
{
this.tabClass = "tab"; // Classname for each tab that should hide/show it's content
this.searchTag = "h3"; // Tagname of element that holds each tab
this.tabContainer = "tabsWrap"; // ID of div, or object that will contain the tabs
this.parentTagName = "table"; // Parent's tagname, parent object holds data to show
this.objContainer = null;
this.getFirstTab = false; // Specifies if we should get and set the first tab.
// This is used when looping through the searchTag's
this.lastTabActive = null; // Last tab that was clicked/activated.
this.tabActiveClass = "on"; // Classname to give a tab that is active.
this.addSpacesToLink = true; // Add extra spaces to the tab links, can be set by user as well
this.printClassName = "block-print"; // Displays objects when printing
this.defaultTabPosition = (isNaN(defaultTabPosition) || defaultTabPosition < 0) ? 0 : defaultTabPosition;
this.init =
function()
{
// Quick check for DOM support
if(!document.createElement) return false;
// Make sure we can locate the tabContainer object
if(typeof(tabContainer) == "string" && tabContainer != "") this.tabContainer = tabContainer;
this.objContainer = getObjByID(this.tabContainer);
if(this.objContainer == null) return false;
if(typeof(tabClass) == "string" && tabClass != "") this.tabClass = tabClass;
if(typeof(searchTag) == "string" && searchTag != "") this.searchTag = searchTag;
if(typeof(parentTagName) == "string" && parentTagName != "") this.parentTagName = parentTagName.toLowerCase();
// Search for 'searchTag' tags
var arrTags = document.getElementsByTagName(this.searchTag);
// If no tags were found, exit here
if(arrTags.length == 0) return false;
// Add a br element to the objContainer so it clears any floats
var brClear = document.createElement("br");
brClear.className = "clear"; // Clear classname, set it in CSS however you like
this.objContainer.appendChild(brClear);
var tabObj, numOfTabs = 0;
for (var i = (arrTags.length - 1); i >= 0; i--)
{
tabObj = arrTags[i];
if(tabObj.innerHTML != null && tabObj.innerHTML.indexOf(this.tabClass) != -1)
{
numOfTabs++;
this.getFirstTab = (i == 0);
this.setupTab(tabObj, (i == this.defaultTabPosition));
}
}
// If tabs were added but a default tab was not selected, do so now.
if(numOfTabs > 0 && this.getFirstTab == false)
{
var tmpTab = this.lastTabActive;
this.lastTabActive = null;
this.doTabClick(tmpTab, true);
}
};
// Sets up a tab object if it's classname matches the tabclass variable
// if not then search through it's children til one is found
this.setupTab =
function(objTab, isDefaultTab)
{
var isDefaultTab = (isDefaultTab == null ? false : isDefaultTab);
if(objTab == null) return false;
// This tab object has a matching classname, set this one up
if(objTab.className.indexOf(this.tabClass) != -1)
{
this.insertTab(objTab, isDefaultTab); // Insert the tab
return true; //Exit
}
// Search through it's children for a matching classname.
var chTabs = objTab.childNodes;
if(chTabs.length == 0) return false; // No children found, exit
// Loop through the objTab's children nodes until
// one has a matching classname. Exit when
// it is found or else sent a false exit message
for(var i = 0; i < chTabs.length; i++)
{
if(chTabs[i].className != null && chTabs[i].className.indexOf(this.tabClass) != -1)
if(this.setupTab(chTabs[i], isDefaultTab)) return true;
}
return false;
};
// Use DOM to insert a tab in the tabs container div
this.insertTab =
function(objCh, isDefaultTab)
{
if(objCh == null) return false;
var objPar = this.findTabParent(objCh);
// If the parent object cannot be found according to the parentTagName,
// then exit this function
if(objPar == null) return false;
var objTabMain = document.createElement("a"); // Wrapper of the tab
objTabMain.href = "javascript:void(0);";
try
{ objTabMain.title = objCh.innerHTML.replace(/<[^>]+>/gi, ""); }
catch (ex)
{ objTabMain.title = objCh.innerHTML; }
var strLink = objCh.innerHTML
if(this.addSpacesToLink) strLink = " " + strLink + " "; // add spaces to seperate links
var objTabText = document.createElement("strong"); // tag for added styling
objTabText.innerHTML = strLink; // Set inner Text to the child object's text
objTabMain.appendChild(objTabText);
// Setup container object for objTabMain and click events
objTabMain.objContent = objPar;
var foo = this;
addEvent(objTabMain, "click", function(){foo.doTabClick(objTabMain, true);}, false);
// Append the objTabMain to the tabs container. Only append BEFORE
// any present children. This is done in case there is already
// something in the container, such as another list, or HTML tags
if(this.objContainer.firstChild != null)
this.objContainer.insertBefore(objTabMain, this.objContainer.firstChild);
else
this.objContainer.appendChild(objTabMain);
setDivStyle(objPar, "display", "none");
// Setup print styles (for css print)
objPar.className += ( (objPar.className == "") ? "" : " ") + this.printClassName;
if(isDefaultTab) this.doTabClick(objTabMain, true);
if(!this.getFirstTab) this.lastTabActive = objTabMain;
};
// Finds the parent for the current tab object
this.findTabParent =
function(objTab)
{
var pt = objTab.parentNode;
var curNodeName = pt.nodeName.toLowerCase();
while(curNodeName != this.parentTagName && pt != document.body)
{
pt = pt.parentNode;
curNodeName = pt.nodeName.toLowerCase();
}
return (pt == document.body) ? null : pt;
};
this.doTabClick =
function(objTab, show)
{
// Exit if the last tab activated is being clicked again.
if(this.lastTabActive != null && objTab == this.lastTabActive) return false;
var show = (typeof(show) == "boolean") ? show : false;
var strDisp = (show) ? "" : "none";
var strClass = (show) ? this.tabActiveClass : "";
objTab.className = strClass; // Set classname for tab being clicked
// Set display property for tab's content object
setDivStyle(objTab.objContent, "display", strDisp);
// Deactivate old tab and hide it's content object in case
// we are showing a new tab's contents
if(show)
{
// Save the last tab active in a temporary variable
var oldTab = this.lastTabActive;
// Declare a new active tab
this.lastTabActive = objTab;
// Hide the old tab content if it's set.
if(oldTab != null)
this.doTabClick(oldTab, false);
}
};
};
// -->