-/*==================================================
- tabber.js by Patrick Fitzgerald pat@barelyfitz.com
-
- Documentation can be found at the following URL:
- http://www.barelyfitz.com/projects/tabber/
-
- License (http://www.opensource.org/licenses/mit-license.php)
-
- Copyright (c) 2006 Patrick Fitzgerald
-
- Permission is hereby granted, free of charge, to any person
- obtaining a copy of this software and associated documentation files
- (the "Software"), to deal in the Software without restriction,
- including without limitation the rights to use, copy, modify, merge,
- publish, distribute, sublicense, and/or sell copies of the Software,
- and to permit persons to whom the Software is furnished to do so,
- subject to the following conditions:
-
- The above copyright notice and this permission notice shall be
- included in all copies or substantial portions of the Software.
-
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
- MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
- NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
- BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
- ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- SOFTWARE.
- ==================================================*/
-
-function tabberObj(argsObj)
-{
- var arg; /* name of an argument to override */
-
- /* Element for the main tabber div. If you supply this in argsObj,
- then the init() method will be called.
- */
- this.div = null;
-
- /* Class of the main tabber div */
- this.classMain = "tabber";
-
- /* Rename classMain to classMainLive after tabifying
- (so a different style can be applied)
- */
- this.classMainLive = "tabberlive";
-
- /* Class of each DIV that contains a tab */
- this.classTab = "tabbertab";
-
- /* Class to indicate which tab should be active on startup */
- this.classTabDefault = "tabbertabdefault";
-
- /* Class for the navigation UL */
- this.classNav = "tabbernav";
-
- /* When a tab is to be hidden, instead of setting display='none', we
- set the class of the div to classTabHide. In your screen
- stylesheet you should set classTabHide to display:none. In your
- print stylesheet you should set display:block to ensure that all
- the information is printed.
- */
- this.classTabHide = "tabbertabhide";
-
- /* Class to set the navigation LI when the tab is active, so you can
- use a different style on the active tab.
- */
- this.classNavActive = "tabberactive";
-
- /* Elements that might contain the title for the tab, only used if a
- title is not specified in the TITLE attribute of DIV classTab.
- */
- this.titleElements = ['h2','h3','h4','h5','h6'];
-
- /* Should we strip out the HTML from the innerHTML of the title elements?
- This should usually be true.
- */
- this.titleElementsStripHTML = true;
-
- /* If the user specified the tab names using a TITLE attribute on
- the DIV, then the browser will display a tooltip whenever the
- mouse is over the DIV. To prevent this tooltip, we can remove the
- TITLE attribute after getting the tab name.
- */
- this.removeTitle = true;
-
- /* If you want to add an id to each link set this to true */
- this.addLinkId = false;
-
- /* If addIds==true, then you can set a format for the ids.
- <tabberid> will be replaced with the id of the main tabber div.
- <tabnumberzero> will be replaced with the tab number
- (tab numbers starting at zero)
- <tabnumberone> will be replaced with the tab number
- (tab numbers starting at one)
- <tabtitle> will be replaced by the tab title
- (with all non-alphanumeric characters removed)
- */
- this.linkIdFormat = '<tabberid>nav<tabnumberone>';
-
- /* You can override the defaults listed above by passing in an object:
- var mytab = new tabber({property:value,property:value});
- */
- for (arg in argsObj) { this[arg] = argsObj[arg]; }
-
- /* Create regular expressions for the class names; Note: if you
- change the class names after a new object is created you must
- also change these regular expressions.
- */
- this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
- this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
- this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
- this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
- this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
-
- /* Array of objects holding info about each tab */
- this.tabs = new Array();
-
- /* If the main tabber div was specified, call init() now */
- if (this.div) {
-
- this.init(this.div);
-
- /* We don't need the main div anymore, and to prevent a memory leak
- in IE, we must remove the circular reference between the div
- and the tabber object. */
- this.div = null;
- }
-}
-
-
-/*--------------------------------------------------
- Methods for tabberObj
- --------------------------------------------------*/
-
-
-tabberObj.prototype.init = function(e)
-{
- /* Set up the tabber interface.
-
- e = element (the main containing div)
-
- Example:
- init(document.getElementById('mytabberdiv'))
- */
-
- var
- childNodes, /* child nodes of the tabber div */
- i, i2, /* loop indices */
- t, /* object to store info about a single tab */
- defaultTab=0, /* which tab to select by default */
- DOM_ul, /* tabbernav list */
- DOM_li, /* tabbernav list item */
- DOM_a, /* tabbernav link */
- aId, /* A unique id for DOM_a */
- headingElement; /* searching for text to use in the tab */
-
- /* Verify that the browser supports DOM scripting */
- if (!document.getElementsByTagName) { return false; }
-
- /* If the main DIV has an ID then save it. */
- if (e.id) {
- this.id = e.id;
- }
-
- /* Clear the tabs array (but it should normally be empty) */
- this.tabs.length = 0;
-
- /* Loop through an array of all the child nodes within our tabber element. */
- childNodes = e.childNodes;
- for(i=0; i < childNodes.length; i++) {
-
- /* Find the nodes where class="tabbertab" */
- if(childNodes[i].className &&
- childNodes[i].className.match(this.REclassTab)) {
-
- /* Create a new object to save info about this tab */
- t = new Object();
-
- /* Save a pointer to the div for this tab */
- t.div = childNodes[i];
-
- /* Add the new object to the array of tabs */
- this.tabs[this.tabs.length] = t;
-
- /* If the class name contains classTabDefault,
- then select this tab by default.
- */
- if (childNodes[i].className.match(this.REclassTabDefault)) {
- defaultTab = this.tabs.length-1;
- }
- }
- }
-
- /* Create a new UL list to hold the tab headings */
- DOM_ul = document.createElement("ul");
- DOM_ul.className = this.classNav;
-
- /* Loop through each tab we found */
- for (i=0; i < this.tabs.length; i++) {
-
- t = this.tabs[i];
-
- /* Get the label to use for this tab:
- From the title attribute on the DIV,
- Or from one of the this.titleElements[] elements,
- Or use an automatically generated number.
- */
- t.headingText = t.div.title;
-
- /* Remove the title attribute to prevent a tooltip from appearing */
- if (this.removeTitle) { t.div.title = ''; }
-
- if (!t.headingText) {
-
- /* Title was not defined in the title of the DIV,
- So try to get the title from an element within the DIV.
- Go through the list of elements in this.titleElements
- (typically heading elements ['h2','h3','h4'])
- */
- for (i2=0; i2<this.titleElements.length; i2++) {
- headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
- if (headingElement) {
- t.headingText = headingElement.innerHTML;
- if (this.titleElementsStripHTML) {
- t.headingText.replace(/<br>/gi," ");
- t.headingText = t.headingText.replace(/<[^>]+>/g,"");
- }
- break;
- }
- }
- }
-
- if (!t.headingText) {
- /* Title was not found (or is blank) so automatically generate a
- number for the tab.
- */
- t.headingText = i + 1;
- }
-
- /* Create a list element for the tab */
- DOM_li = document.createElement("li");
-
- /* Save a reference to this list item so we can later change it to
- the "active" class */
- t.li = DOM_li;
-
- /* Create a link to activate the tab */
- DOM_a = document.createElement("a");
- DOM_a.appendChild(document.createTextNode(t.headingText));
- DOM_a.href = "javascript:void(null);";
- DOM_a.title = t.headingText;
- DOM_a.onclick = this.navClick;
-
- /* Add some properties to the link so we can identify which tab
- was clicked. Later the navClick method will need this.
- */
- DOM_a.tabber = this;
- DOM_a.tabberIndex = i;
-
- /* Do we need to add an id to DOM_a? */
- if (this.addLinkId && this.linkIdFormat) {
-
- /* Determine the id name */
- aId = this.linkIdFormat;
- aId = aId.replace(/<tabberid>/gi, this.id);
- aId = aId.replace(/<tabnumberzero>/gi, i);
- aId = aId.replace(/<tabnumberone>/gi, i+1);
- aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
-
- DOM_a.id = aId;
- }
-
- /* Add the link to the list element */
- DOM_li.appendChild(DOM_a);
-
- /* Add the list element to the list */
- DOM_ul.appendChild(DOM_li);
- }
-
- /* Add the UL list to the beginning of the tabber div */
- e.insertBefore(DOM_ul, e.firstChild);
-
- /* Make the tabber div "live" so different CSS can be applied */
- e.className = e.className.replace(this.REclassMain, this.classMainLive);
-
- /* Activate the default tab, and do not call the onclick handler */
- this.tabShow(defaultTab);
-
- /* If the user specified an onLoad function, call it now. */
- if (typeof this.onLoad == 'function') {
- this.onLoad({tabber:this});
- }
-
- return this;
-};
-
-
-tabberObj.prototype.navClick = function(event)
-{
- /* This method should only be called by the onClick event of an <A>
- element, in which case we will determine which tab was clicked by
- examining a property that we previously attached to the <A>
- element.
-
- Since this was triggered from an onClick event, the variable
- "this" refers to the <A> element that triggered the onClick
- event (and not to the tabberObj).
-
- When tabberObj was initialized, we added some extra properties
- to the <A> element, for the purpose of retrieving them now. Get
- the tabberObj object, plus the tab number that was clicked.
- */
-
- var
- rVal, /* Return value from the user onclick function */
- a, /* element that triggered the onclick event */
- self, /* the tabber object */
- tabberIndex, /* index of the tab that triggered the event */
- onClickArgs; /* args to send the onclick function */
-
- a = this;
- if (!a.tabber) { return false; }
-
- self = a.tabber;
- tabberIndex = a.tabberIndex;
-
- /* Remove focus from the link because it looks ugly.
- I don't know if this is a good idea...
- */
- a.blur();
-
- /* If the user specified an onClick function, call it now.
- If the function returns false then do not continue.
- */
- if (typeof self.onClick == 'function') {
-
- onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
-
- /* IE uses a different way to access the event object */
- if (!event) { onClickArgs.event = window.event; }
-
- rVal = self.onClick(onClickArgs);
- if (rVal === false) { return false; }
- }
-
- self.tabShow(tabberIndex);
-
- return false;
-};
-
-
-tabberObj.prototype.tabHideAll = function()
-{
- var i; /* counter */
-
- /* Hide all tabs and make all navigation links inactive */
- for (i = 0; i < this.tabs.length; i++) {
- this.tabHide(i);
- }
-};
-
-
-tabberObj.prototype.tabHide = function(tabberIndex)
-{
- var div;
-
- if (!this.tabs[tabberIndex]) { return false; }
-
- /* Hide a single tab and make its navigation link inactive */
- div = this.tabs[tabberIndex].div;
-
- /* Hide the tab contents by adding classTabHide to the div */
- if (!div.className.match(this.REclassTabHide)) {
- div.className += ' ' + this.classTabHide;
- }
- this.navClearActive(tabberIndex);
-
- return this;
-};
-
-
-tabberObj.prototype.tabShow = function(tabberIndex)
-{
- /* Show the tabberIndex tab and hide all the other tabs */
-
- var div;
-
- if (!this.tabs[tabberIndex]) { return false; }
-
- /* Hide all the tabs first */
- this.tabHideAll();
-
- /* Get the div that holds this tab */
- div = this.tabs[tabberIndex].div;
-
- /* Remove classTabHide from the div */
- div.className = div.className.replace(this.REclassTabHide, '');
-
- /* Mark this tab navigation link as "active" */
- this.navSetActive(tabberIndex);
-
- /* If the user specified an onTabDisplay function, call it now. */
- if (typeof this.onTabDisplay == 'function') {
- this.onTabDisplay({'tabber':this, 'index':tabberIndex});
- }
-
- return this;
-};
-
-tabberObj.prototype.navSetActive = function(tabberIndex)
-{
- /* Note: this method does *not* enforce the rule
- that only one nav item can be active at a time.
- */
-
- /* Set classNavActive for the navigation list item */
- this.tabs[tabberIndex].li.className = this.classNavActive;
-
- return this;
-};
-
-
-tabberObj.prototype.navClearActive = function(tabberIndex)
-{
- /* Note: this method does *not* enforce the rule
- that one nav should always be active.
- */
-
- /* Remove classNavActive from the navigation list item */
- this.tabs[tabberIndex].li.className = '';
-
- return this;
-};
-
-
-/*==================================================*/
-
-
-function tabberAutomatic(tabberArgs)
-{
- /* This function finds all DIV elements in the document where
- class=tabber.classMain, then converts them to use the tabber
- interface.
-
- tabberArgs = an object to send to "new tabber()"
- */
- var
- tempObj, /* Temporary tabber object */
- divs, /* Array of all divs on the page */
- i; /* Loop index */
-
- if (!tabberArgs) { tabberArgs = {}; }
-
- /* Create a tabber object so we can get the value of classMain */
- tempObj = new tabberObj(tabberArgs);
-
- /* Find all DIV elements in the document that have class=tabber */
-
- /* First get an array of all DIV elements and loop through them */
- divs = document.getElementsByTagName("div");
- for (i=0; i < divs.length; i++) {
-
- /* Is this DIV the correct class? */
- if (divs[i].className &&
- divs[i].className.match(tempObj.REclassMain)) {
-
- /* Now tabify the DIV */
- tabberArgs.div = divs[i];
- divs[i].tabber = new tabberObj(tabberArgs);
- }
- }
-
- return this;
-}
-
-
-/*==================================================*/
-
-
-function tabberAutomaticOnLoad(tabberArgs)
-{
- /* This function adds tabberAutomatic to the window.onload event,
- so it will run after the document has finished loading.
- */
- var oldOnLoad;
-
- if (!tabberArgs) { tabberArgs = {}; }
-
- /* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */
-
- oldOnLoad = window.onload;
- if (typeof window.onload != 'function') {
- window.onload = function() {
- tabberAutomatic(tabberArgs);
- };
- } else {
- window.onload = function() {
- oldOnLoad();
- tabberAutomatic(tabberArgs);
- };
- }
-}
-
-
-/*==================================================*/
-
-
-/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
-
-if (typeof tabberOptions == 'undefined') {
-
- tabberAutomaticOnLoad();
-
-} else {
-
- if (!tabberOptions['manualStartup']) {
- tabberAutomaticOnLoad(tabberOptions);
- }
-
-}
+/*==================================================\r
+ $Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $\r
+ tabber.js by Patrick Fitzgerald pat@barelyfitz.com\r
+\r
+ Documentation can be found at the following URL:\r
+ http://www.barelyfitz.com/projects/tabber/\r
+\r
+ License (http://www.opensource.org/licenses/mit-license.php)\r
+\r
+ Copyright (c) 2006 Patrick Fitzgerald\r
+\r
+ Permission is hereby granted, free of charge, to any person\r
+ obtaining a copy of this software and associated documentation files\r
+ (the "Software"), to deal in the Software without restriction,\r
+ including without limitation the rights to use, copy, modify, merge,\r
+ publish, distribute, sublicense, and/or sell copies of the Software,\r
+ and to permit persons to whom the Software is furnished to do so,\r
+ subject to the following conditions:\r
+\r
+ The above copyright notice and this permission notice shall be\r
+ included in all copies or substantial portions of the Software.\r
+\r
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,\r
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\r
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\r
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS\r
+ BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN\r
+ ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\r
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\r
+ SOFTWARE.\r
+ ==================================================*/\r
+\r
+function tabberObj(argsObj)\r
+{\r
+ var arg; /* name of an argument to override */\r
+\r
+ /* Element for the main tabber div. If you supply this in argsObj,\r
+ then the init() method will be called.\r
+ */\r
+ this.div = null;\r
+\r
+ /* Class of the main tabber div */\r
+ this.classMain = "tabber";\r
+\r
+ /* Rename classMain to classMainLive after tabifying\r
+ (so a different style can be applied)\r
+ */\r
+ this.classMainLive = "tabberlive";\r
+\r
+ /* Class of each DIV that contains a tab */\r
+ this.classTab = "tabbertab";\r
+\r
+ /* Class to indicate which tab should be active on startup */\r
+ this.classTabDefault = "tabbertabdefault";\r
+\r
+ /* Class for the navigation UL */\r
+ this.classNav = "tabbernav";\r
+\r
+ /* When a tab is to be hidden, instead of setting display='none', we\r
+ set the class of the div to classTabHide. In your screen\r
+ stylesheet you should set classTabHide to display:none. In your\r
+ print stylesheet you should set display:block to ensure that all\r
+ the information is printed.\r
+ */\r
+ this.classTabHide = "tabbertabhide";\r
+\r
+ /* Class to set the navigation LI when the tab is active, so you can\r
+ use a different style on the active tab.\r
+ */\r
+ this.classNavActive = "tabberactive";\r
+\r
+ /* Elements that might contain the title for the tab, only used if a\r
+ title is not specified in the TITLE attribute of DIV classTab.\r
+ */\r
+ this.titleElements = ['h2','h3','h4','h5','h6'];\r
+\r
+ /* Should we strip out the HTML from the innerHTML of the title elements?\r
+ This should usually be true.\r
+ */\r
+ this.titleElementsStripHTML = true;\r
+\r
+ /* If the user specified the tab names using a TITLE attribute on\r
+ the DIV, then the browser will display a tooltip whenever the\r
+ mouse is over the DIV. To prevent this tooltip, we can remove the\r
+ TITLE attribute after getting the tab name.\r
+ */\r
+ this.removeTitle = true;\r
+\r
+ /* If you want to add an id to each link set this to true */\r
+ this.addLinkId = false;\r
+\r
+ /* If addIds==true, then you can set a format for the ids.\r
+ <tabberid> will be replaced with the id of the main tabber div.\r
+ <tabnumberzero> will be replaced with the tab number\r
+ (tab numbers starting at zero)\r
+ <tabnumberone> will be replaced with the tab number\r
+ (tab numbers starting at one)\r
+ <tabtitle> will be replaced by the tab title\r
+ (with all non-alphanumeric characters removed)\r
+ */\r
+ this.linkIdFormat = '<tabberid>nav<tabnumberone>';\r
+\r
+ /* You can override the defaults listed above by passing in an object:\r
+ var mytab = new tabber({property:value,property:value});\r
+ */\r
+ for (arg in argsObj) { this[arg] = argsObj[arg]; }\r
+\r
+ /* Create regular expressions for the class names; Note: if you\r
+ change the class names after a new object is created you must\r
+ also change these regular expressions.\r
+ */\r
+ this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');\r
+ this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');\r
+ this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');\r
+ this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');\r
+ this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');\r
+\r
+ /* Array of objects holding info about each tab */\r
+ this.tabs = new Array();\r
+\r
+ /* If the main tabber div was specified, call init() now */\r
+ if (this.div) {\r
+\r
+ this.init(this.div);\r
+\r
+ /* We don't need the main div anymore, and to prevent a memory leak\r
+ in IE, we must remove the circular reference between the div\r
+ and the tabber object. */\r
+ this.div = null;\r
+ }\r
+}\r
+\r
+\r
+/*--------------------------------------------------\r
+ Methods for tabberObj\r
+ --------------------------------------------------*/\r
+\r
+\r
+tabberObj.prototype.init = function(e)\r
+{\r
+ /* Set up the tabber interface.\r
+\r
+ e = element (the main containing div)\r
+\r
+ Example:\r
+ init(document.getElementById('mytabberdiv'))\r
+ */\r
+\r
+ var\r
+ childNodes, /* child nodes of the tabber div */\r
+ i, i2, /* loop indices */\r
+ t, /* object to store info about a single tab */\r
+ defaultTab=0, /* which tab to select by default */\r
+ DOM_ul, /* tabbernav list */\r
+ DOM_li, /* tabbernav list item */\r
+ DOM_a, /* tabbernav link */\r
+ aId, /* A unique id for DOM_a */\r
+ headingElement; /* searching for text to use in the tab */\r
+\r
+ /* Verify that the browser supports DOM scripting */\r
+ if (!document.getElementsByTagName) { return false; }\r
+\r
+ /* If the main DIV has an ID then save it. */\r
+ if (e.id) {\r
+ this.id = e.id;\r
+ }\r
+\r
+ /* Clear the tabs array (but it should normally be empty) */\r
+ this.tabs.length = 0;\r
+\r
+ /* Loop through an array of all the child nodes within our tabber element. */\r
+ childNodes = e.childNodes;\r
+ for(i=0; i < childNodes.length; i++) {\r
+\r
+ /* Find the nodes where class="tabbertab" */\r
+ if(childNodes[i].className &&\r
+ childNodes[i].className.match(this.REclassTab)) {\r
+ \r
+ /* Create a new object to save info about this tab */\r
+ t = new Object();\r
+ \r
+ /* Save a pointer to the div for this tab */\r
+ t.div = childNodes[i];\r
+ \r
+ /* Add the new object to the array of tabs */\r
+ this.tabs[this.tabs.length] = t;\r
+\r
+ /* If the class name contains classTabDefault,\r
+ then select this tab by default.\r
+ */\r
+ if (childNodes[i].className.match(this.REclassTabDefault)) {\r
+ defaultTab = this.tabs.length-1;\r
+ }\r
+ }\r
+ }\r
+\r
+ /* Create a new UL list to hold the tab headings */\r
+ DOM_ul = document.createElement("ul");\r
+ DOM_ul.className = this.classNav;\r
+ \r
+ /* Loop through each tab we found */\r
+ for (i=0; i < this.tabs.length; i++) {\r
+\r
+ t = this.tabs[i];\r
+\r
+ /* Get the label to use for this tab:\r
+ From the title attribute on the DIV,\r
+ Or from one of the this.titleElements[] elements,\r
+ Or use an automatically generated number.\r
+ */\r
+ t.headingText = t.div.title;\r
+\r
+ /* Remove the title attribute to prevent a tooltip from appearing */\r
+ if (this.removeTitle) { t.div.title = ''; }\r
+\r
+ if (!t.headingText) {\r
+\r
+ /* Title was not defined in the title of the DIV,\r
+ So try to get the title from an element within the DIV.\r
+ Go through the list of elements in this.titleElements\r
+ (typically heading elements ['h2','h3','h4'])\r
+ */\r
+ for (i2=0; i2<this.titleElements.length; i2++) {\r
+ headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];\r
+ if (headingElement) {\r
+ t.headingText = headingElement.innerHTML;\r
+ if (this.titleElementsStripHTML) {\r
+ t.headingText.replace(/<br>/gi," ");\r
+ t.headingText = t.headingText.replace(/<[^>]+>/g,"");\r
+ }\r
+ break;\r
+ }\r
+ }\r
+ }\r
+\r
+ if (!t.headingText) {\r
+ /* Title was not found (or is blank) so automatically generate a\r
+ number for the tab.\r
+ */\r
+ t.headingText = i + 1;\r
+ }\r
+\r
+ /* Create a list element for the tab */\r
+ DOM_li = document.createElement("li");\r
+\r
+ /* Save a reference to this list item so we can later change it to\r
+ the "active" class */\r
+ t.li = DOM_li;\r
+\r
+ /* Create a link to activate the tab */\r
+ DOM_a = document.createElement("a");\r
+ DOM_a.appendChild(document.createTextNode(t.headingText));\r
+ DOM_a.href = "javascript:void(null);";\r
+ DOM_a.title = t.headingText;\r
+ DOM_a.onclick = this.navClick;\r
+\r
+ /* Add some properties to the link so we can identify which tab\r
+ was clicked. Later the navClick method will need this.\r
+ */\r
+ DOM_a.tabber = this;\r
+ DOM_a.tabberIndex = i;\r
+\r
+ /* Do we need to add an id to DOM_a? */\r
+ if (this.addLinkId && this.linkIdFormat) {\r
+\r
+ /* Determine the id name */\r
+ aId = this.linkIdFormat;\r
+ aId = aId.replace(/<tabberid>/gi, this.id);\r
+ aId = aId.replace(/<tabnumberzero>/gi, i);\r
+ aId = aId.replace(/<tabnumberone>/gi, i+1);\r
+ aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));\r
+\r
+ DOM_a.id = aId;\r
+ }\r
+\r
+ /* Add the link to the list element */\r
+ DOM_li.appendChild(DOM_a);\r
+\r
+ /* Add the list element to the list */\r
+ DOM_ul.appendChild(DOM_li);\r
+ }\r
+\r
+ /* Add the UL list to the beginning of the tabber div */\r
+ e.insertBefore(DOM_ul, e.firstChild);\r
+\r
+ /* Make the tabber div "live" so different CSS can be applied */\r
+ e.className = e.className.replace(this.REclassMain, this.classMainLive);\r
+\r
+ /* Activate the default tab, and do not call the onclick handler */\r
+ this.tabShow(defaultTab);\r
+\r
+ /* If the user specified an onLoad function, call it now. */\r
+ if (typeof this.onLoad == 'function') {\r
+ this.onLoad({tabber:this});\r
+ }\r
+\r
+ return this;\r
+};\r
+\r
+\r
+tabberObj.prototype.navClick = function(event)\r
+{\r
+ /* This method should only be called by the onClick event of an <A>\r
+ element, in which case we will determine which tab was clicked by\r
+ examining a property that we previously attached to the <A>\r
+ element.\r
+\r
+ Since this was triggered from an onClick event, the variable\r
+ "this" refers to the <A> element that triggered the onClick\r
+ event (and not to the tabberObj).\r
+\r
+ When tabberObj was initialized, we added some extra properties\r
+ to the <A> element, for the purpose of retrieving them now. Get\r
+ the tabberObj object, plus the tab number that was clicked.\r
+ */\r
+\r
+ var\r
+ rVal, /* Return value from the user onclick function */\r
+ a, /* element that triggered the onclick event */\r
+ self, /* the tabber object */\r
+ tabberIndex, /* index of the tab that triggered the event */\r
+ onClickArgs; /* args to send the onclick function */\r
+\r
+ a = this;\r
+ if (!a.tabber) { return false; }\r
+\r
+ self = a.tabber;\r
+ tabberIndex = a.tabberIndex;\r
+\r
+ /* Remove focus from the link because it looks ugly.\r
+ I don't know if this is a good idea...\r
+ */\r
+ a.blur();\r
+\r
+ /* If the user specified an onClick function, call it now.\r
+ If the function returns false then do not continue.\r
+ */\r
+ if (typeof self.onClick == 'function') {\r
+\r
+ onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};\r
+\r
+ /* IE uses a different way to access the event object */\r
+ if (!event) { onClickArgs.event = window.event; }\r
+\r
+ rVal = self.onClick(onClickArgs);\r
+ if (rVal === false) { return false; }\r
+ }\r
+\r
+ self.tabShow(tabberIndex);\r
+\r
+ return false;\r
+};\r
+\r
+\r
+tabberObj.prototype.tabHideAll = function()\r
+{\r
+ var i; /* counter */\r
+\r
+ /* Hide all tabs and make all navigation links inactive */\r
+ for (i = 0; i < this.tabs.length; i++) {\r
+ this.tabHide(i);\r
+ }\r
+};\r
+\r
+\r
+tabberObj.prototype.tabHide = function(tabberIndex)\r
+{\r
+ var div;\r
+\r
+ if (!this.tabs[tabberIndex]) { return false; }\r
+\r
+ /* Hide a single tab and make its navigation link inactive */\r
+ div = this.tabs[tabberIndex].div;\r
+\r
+ /* Hide the tab contents by adding classTabHide to the div */\r
+ if (!div.className.match(this.REclassTabHide)) {\r
+ div.className += ' ' + this.classTabHide;\r
+ }\r
+ this.navClearActive(tabberIndex);\r
+\r
+ return this;\r
+};\r
+\r
+\r
+tabberObj.prototype.tabShow = function(tabberIndex)\r
+{\r
+ /* Show the tabberIndex tab and hide all the other tabs */\r
+\r
+ var div;\r
+\r
+ if (!this.tabs[tabberIndex]) { return false; }\r
+\r
+ /* Hide all the tabs first */\r
+ this.tabHideAll();\r
+\r
+ /* Get the div that holds this tab */\r
+ div = this.tabs[tabberIndex].div;\r
+\r
+ /* Remove classTabHide from the div */\r
+ div.className = div.className.replace(this.REclassTabHide, '');\r
+\r
+ /* Mark this tab navigation link as "active" */\r
+ this.navSetActive(tabberIndex);\r
+\r
+ /* If the user specified an onTabDisplay function, call it now. */\r
+ if (typeof this.onTabDisplay == 'function') {\r
+ this.onTabDisplay({'tabber':this, 'index':tabberIndex});\r
+ }\r
+\r
+ return this;\r
+};\r
+\r
+tabberObj.prototype.navSetActive = function(tabberIndex)\r
+{\r
+ /* Note: this method does *not* enforce the rule\r
+ that only one nav item can be active at a time.\r
+ */\r
+\r
+ /* Set classNavActive for the navigation list item */\r
+ this.tabs[tabberIndex].li.className = this.classNavActive;\r
+\r
+ return this;\r
+};\r
+\r
+\r
+tabberObj.prototype.navClearActive = function(tabberIndex)\r
+{\r
+ /* Note: this method does *not* enforce the rule\r
+ that one nav should always be active.\r
+ */\r
+\r
+ /* Remove classNavActive from the navigation list item */\r
+ this.tabs[tabberIndex].li.className = '';\r
+\r
+ return this;\r
+};\r
+\r
+\r
+/*==================================================*/\r
+\r
+\r
+function tabberAutomatic(tabberArgs)\r
+{\r
+ /* This function finds all DIV elements in the document where\r
+ class=tabber.classMain, then converts them to use the tabber\r
+ interface.\r
+\r
+ tabberArgs = an object to send to "new tabber()"\r
+ */\r
+ var\r
+ tempObj, /* Temporary tabber object */\r
+ divs, /* Array of all divs on the page */\r
+ i; /* Loop index */\r
+\r
+ if (!tabberArgs) { tabberArgs = {}; }\r
+\r
+ /* Create a tabber object so we can get the value of classMain */\r
+ tempObj = new tabberObj(tabberArgs);\r
+\r
+ /* Find all DIV elements in the document that have class=tabber */\r
+\r
+ /* First get an array of all DIV elements and loop through them */\r
+ divs = document.getElementsByTagName("div");\r
+ for (i=0; i < divs.length; i++) {\r
+ \r
+ /* Is this DIV the correct class? */\r
+ if (divs[i].className &&\r
+ divs[i].className.match(tempObj.REclassMain)) {\r
+ \r
+ /* Now tabify the DIV */\r
+ tabberArgs.div = divs[i];\r
+ divs[i].tabber = new tabberObj(tabberArgs);\r
+ }\r
+ }\r
+ \r
+ return this;\r
+}\r
+\r
+\r
+/*==================================================*/\r
+\r
+\r
+function tabberAutomaticOnLoad(tabberArgs)\r
+{\r
+ /* This function adds tabberAutomatic to the window.onload event,\r
+ so it will run after the document has finished loading.\r
+ */\r
+ var oldOnLoad;\r
+\r
+ if (!tabberArgs) { tabberArgs = {}; }\r
+\r
+ /* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */\r
+\r
+ oldOnLoad = window.onload;\r
+ if (typeof window.onload != 'function') {\r
+ window.onload = function() {\r
+ tabberAutomatic(tabberArgs);\r
+ };\r
+ } else {\r
+ window.onload = function() {\r
+ oldOnLoad();\r
+ tabberAutomatic(tabberArgs);\r
+ };\r
+ }\r
+}\r
+\r
+\r
+/*==================================================*/\r
+\r
+\r
+/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */\r
+\r
+if (typeof tabberOptions == 'undefined') {\r
+\r
+ tabberAutomaticOnLoad();\r
+\r
+} else {\r
+\r
+ if (!tabberOptions['manualStartup']) {\r
+ tabberAutomaticOnLoad(tabberOptions);\r
+ }\r
+\r
+}\r