1 /*==================================================
\r
2 $Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $
\r
3 tabber.js by Patrick Fitzgerald pat@barelyfitz.com
\r
5 Documentation can be found at the following URL:
\r
6 http://www.barelyfitz.com/projects/tabber/
\r
8 License (http://www.opensource.org/licenses/mit-license.php)
\r
10 Copyright (c) 2006 Patrick Fitzgerald
\r
12 Permission is hereby granted, free of charge, to any person
\r
13 obtaining a copy of this software and associated documentation files
\r
14 (the "Software"), to deal in the Software without restriction,
\r
15 including without limitation the rights to use, copy, modify, merge,
\r
16 publish, distribute, sublicense, and/or sell copies of the Software,
\r
17 and to permit persons to whom the Software is furnished to do so,
\r
18 subject to the following conditions:
\r
20 The above copyright notice and this permission notice shall be
\r
21 included in all copies or substantial portions of the Software.
\r
23 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
\r
24 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
\r
25 MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
\r
26 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
\r
27 BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
\r
28 ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
\r
29 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
\r
31 ==================================================*/
\r
33 function tabberObj(argsObj)
\r
35 var arg; /* name of an argument to override */
\r
37 /* Element for the main tabber div. If you supply this in argsObj,
\r
38 then the init() method will be called.
\r
42 /* Class of the main tabber div */
\r
43 this.classMain = "tabber";
\r
45 /* Rename classMain to classMainLive after tabifying
\r
46 (so a different style can be applied)
\r
48 this.classMainLive = "tabberlive";
\r
50 /* Class of each DIV that contains a tab */
\r
51 this.classTab = "tabbertab";
\r
53 /* Class to indicate which tab should be active on startup */
\r
54 this.classTabDefault = "tabbertabdefault";
\r
56 /* Class for the navigation UL */
\r
57 this.classNav = "tabbernav";
\r
59 /* When a tab is to be hidden, instead of setting display='none', we
\r
60 set the class of the div to classTabHide. In your screen
\r
61 stylesheet you should set classTabHide to display:none. In your
\r
62 print stylesheet you should set display:block to ensure that all
\r
63 the information is printed.
\r
65 this.classTabHide = "tabbertabhide";
\r
67 /* Class to set the navigation LI when the tab is active, so you can
\r
68 use a different style on the active tab.
\r
70 this.classNavActive = "tabberactive";
\r
72 /* Elements that might contain the title for the tab, only used if a
\r
73 title is not specified in the TITLE attribute of DIV classTab.
\r
75 this.titleElements = ['h2','h3','h4','h5','h6'];
\r
77 /* Should we strip out the HTML from the innerHTML of the title elements?
\r
78 This should usually be true.
\r
80 this.titleElementsStripHTML = true;
\r
82 /* If the user specified the tab names using a TITLE attribute on
\r
83 the DIV, then the browser will display a tooltip whenever the
\r
84 mouse is over the DIV. To prevent this tooltip, we can remove the
\r
85 TITLE attribute after getting the tab name.
\r
87 this.removeTitle = true;
\r
89 /* If you want to add an id to each link set this to true */
\r
90 this.addLinkId = false;
\r
92 /* If addIds==true, then you can set a format for the ids.
\r
93 <tabberid> will be replaced with the id of the main tabber div.
\r
94 <tabnumberzero> will be replaced with the tab number
\r
95 (tab numbers starting at zero)
\r
96 <tabnumberone> will be replaced with the tab number
\r
97 (tab numbers starting at one)
\r
98 <tabtitle> will be replaced by the tab title
\r
99 (with all non-alphanumeric characters removed)
\r
101 this.linkIdFormat = '<tabberid>nav<tabnumberone>';
\r
103 /* You can override the defaults listed above by passing in an object:
\r
104 var mytab = new tabber({property:value,property:value});
\r
106 for (arg in argsObj) { this[arg] = argsObj[arg]; }
\r
108 /* Create regular expressions for the class names; Note: if you
\r
109 change the class names after a new object is created you must
\r
110 also change these regular expressions.
\r
112 this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
\r
113 this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
\r
114 this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
\r
115 this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
\r
116 this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
\r
118 /* Array of objects holding info about each tab */
\r
119 this.tabs = new Array();
\r
121 /* If the main tabber div was specified, call init() now */
\r
124 this.init(this.div);
\r
126 /* We don't need the main div anymore, and to prevent a memory leak
\r
127 in IE, we must remove the circular reference between the div
\r
128 and the tabber object. */
\r
134 /*--------------------------------------------------
\r
135 Methods for tabberObj
\r
136 --------------------------------------------------*/
\r
139 tabberObj.prototype.init = function(e)
\r
141 /* Set up the tabber interface.
\r
143 e = element (the main containing div)
\r
146 init(document.getElementById('mytabberdiv'))
\r
150 childNodes, /* child nodes of the tabber div */
\r
151 i, i2, /* loop indices */
\r
152 t, /* object to store info about a single tab */
\r
153 defaultTab=0, /* which tab to select by default */
\r
154 DOM_ul, /* tabbernav list */
\r
155 DOM_li, /* tabbernav list item */
\r
156 DOM_a, /* tabbernav link */
\r
157 aId, /* A unique id for DOM_a */
\r
158 headingElement; /* searching for text to use in the tab */
\r
160 /* Verify that the browser supports DOM scripting */
\r
161 if (!document.getElementsByTagName) { return false; }
\r
163 /* If the main DIV has an ID then save it. */
\r
168 /* Clear the tabs array (but it should normally be empty) */
\r
169 this.tabs.length = 0;
\r
171 /* Loop through an array of all the child nodes within our tabber element. */
\r
172 childNodes = e.childNodes;
\r
173 for(i=0; i < childNodes.length; i++) {
\r
175 /* Find the nodes where class="tabbertab" */
\r
176 if(childNodes[i].className &&
\r
177 childNodes[i].className.match(this.REclassTab)) {
\r
179 /* Create a new object to save info about this tab */
\r
182 /* Save a pointer to the div for this tab */
\r
183 t.div = childNodes[i];
\r
185 /* Add the new object to the array of tabs */
\r
186 this.tabs[this.tabs.length] = t;
\r
188 /* If the class name contains classTabDefault,
\r
189 then select this tab by default.
\r
191 if (childNodes[i].className.match(this.REclassTabDefault)) {
\r
192 defaultTab = this.tabs.length-1;
\r
197 /* Create a new UL list to hold the tab headings */
\r
198 DOM_ul = document.createElement("ul");
\r
199 DOM_ul.className = this.classNav;
\r
201 /* Loop through each tab we found */
\r
202 for (i=0; i < this.tabs.length; i++) {
\r
206 /* Get the label to use for this tab:
\r
207 From the title attribute on the DIV,
\r
208 Or from one of the this.titleElements[] elements,
\r
209 Or use an automatically generated number.
\r
211 t.headingText = t.div.title;
\r
213 /* Remove the title attribute to prevent a tooltip from appearing */
\r
214 if (this.removeTitle) { t.div.title = ''; }
\r
216 if (!t.headingText) {
\r
218 /* Title was not defined in the title of the DIV,
\r
219 So try to get the title from an element within the DIV.
\r
220 Go through the list of elements in this.titleElements
\r
221 (typically heading elements ['h2','h3','h4'])
\r
223 for (i2=0; i2<this.titleElements.length; i2++) {
\r
224 headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
\r
225 if (headingElement) {
\r
226 t.headingText = headingElement.innerHTML;
\r
227 if (this.titleElementsStripHTML) {
\r
228 t.headingText.replace(/<br>/gi," ");
\r
229 t.headingText = t.headingText.replace(/<[^>]+>/g,"");
\r
236 if (!t.headingText) {
\r
237 /* Title was not found (or is blank) so automatically generate a
\r
238 number for the tab.
\r
240 t.headingText = i + 1;
\r
243 /* Create a list element for the tab */
\r
244 DOM_li = document.createElement("li");
\r
246 /* Save a reference to this list item so we can later change it to
\r
247 the "active" class */
\r
250 /* Create a link to activate the tab */
\r
251 DOM_a = document.createElement("a");
\r
252 DOM_a.appendChild(document.createTextNode(t.headingText));
\r
253 DOM_a.href = "javascript:void(null);";
\r
254 DOM_a.title = t.headingText;
\r
255 DOM_a.onclick = this.navClick;
\r
257 /* Add some properties to the link so we can identify which tab
\r
258 was clicked. Later the navClick method will need this.
\r
260 DOM_a.tabber = this;
\r
261 DOM_a.tabberIndex = i;
\r
263 /* Do we need to add an id to DOM_a? */
\r
264 if (this.addLinkId && this.linkIdFormat) {
\r
266 /* Determine the id name */
\r
267 aId = this.linkIdFormat;
\r
268 aId = aId.replace(/<tabberid>/gi, this.id);
\r
269 aId = aId.replace(/<tabnumberzero>/gi, i);
\r
270 aId = aId.replace(/<tabnumberone>/gi, i+1);
\r
271 aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
\r
276 /* Add the link to the list element */
\r
277 DOM_li.appendChild(DOM_a);
\r
279 /* Add the list element to the list */
\r
280 DOM_ul.appendChild(DOM_li);
\r
283 /* Add the UL list to the beginning of the tabber div */
\r
284 e.insertBefore(DOM_ul, e.firstChild);
\r
286 /* Make the tabber div "live" so different CSS can be applied */
\r
287 e.className = e.className.replace(this.REclassMain, this.classMainLive);
\r
289 /* Activate the default tab, and do not call the onclick handler */
\r
290 this.tabShow(defaultTab);
\r
292 /* If the user specified an onLoad function, call it now. */
\r
293 if (typeof this.onLoad == 'function') {
\r
294 this.onLoad({tabber:this});
\r
301 tabberObj.prototype.navClick = function(event)
\r
303 /* This method should only be called by the onClick event of an <A>
\r
304 element, in which case we will determine which tab was clicked by
\r
305 examining a property that we previously attached to the <A>
\r
308 Since this was triggered from an onClick event, the variable
\r
309 "this" refers to the <A> element that triggered the onClick
\r
310 event (and not to the tabberObj).
\r
312 When tabberObj was initialized, we added some extra properties
\r
313 to the <A> element, for the purpose of retrieving them now. Get
\r
314 the tabberObj object, plus the tab number that was clicked.
\r
318 rVal, /* Return value from the user onclick function */
\r
319 a, /* element that triggered the onclick event */
\r
320 self, /* the tabber object */
\r
321 tabberIndex, /* index of the tab that triggered the event */
\r
322 onClickArgs; /* args to send the onclick function */
\r
325 if (!a.tabber) { return false; }
\r
328 tabberIndex = a.tabberIndex;
\r
330 /* Remove focus from the link because it looks ugly.
\r
331 I don't know if this is a good idea...
\r
335 /* If the user specified an onClick function, call it now.
\r
336 If the function returns false then do not continue.
\r
338 if (typeof self.onClick == 'function') {
\r
340 onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
\r
342 /* IE uses a different way to access the event object */
\r
343 if (!event) { onClickArgs.event = window.event; }
\r
345 rVal = self.onClick(onClickArgs);
\r
346 if (rVal === false) { return false; }
\r
349 self.tabShow(tabberIndex);
\r
355 tabberObj.prototype.tabHideAll = function()
\r
357 var i; /* counter */
\r
359 /* Hide all tabs and make all navigation links inactive */
\r
360 for (i = 0; i < this.tabs.length; i++) {
\r
366 tabberObj.prototype.tabHide = function(tabberIndex)
\r
370 if (!this.tabs[tabberIndex]) { return false; }
\r
372 /* Hide a single tab and make its navigation link inactive */
\r
373 div = this.tabs[tabberIndex].div;
\r
375 /* Hide the tab contents by adding classTabHide to the div */
\r
376 if (!div.className.match(this.REclassTabHide)) {
\r
377 div.className += ' ' + this.classTabHide;
\r
379 this.navClearActive(tabberIndex);
\r
385 tabberObj.prototype.tabShow = function(tabberIndex)
\r
387 /* Show the tabberIndex tab and hide all the other tabs */
\r
391 if (!this.tabs[tabberIndex]) { return false; }
\r
393 /* Hide all the tabs first */
\r
396 /* Get the div that holds this tab */
\r
397 div = this.tabs[tabberIndex].div;
\r
399 /* Remove classTabHide from the div */
\r
400 div.className = div.className.replace(this.REclassTabHide, '');
\r
402 /* Mark this tab navigation link as "active" */
\r
403 this.navSetActive(tabberIndex);
\r
405 /* If the user specified an onTabDisplay function, call it now. */
\r
406 if (typeof this.onTabDisplay == 'function') {
\r
407 this.onTabDisplay({'tabber':this, 'index':tabberIndex});
\r
413 tabberObj.prototype.navSetActive = function(tabberIndex)
\r
415 /* Note: this method does *not* enforce the rule
\r
416 that only one nav item can be active at a time.
\r
419 /* Set classNavActive for the navigation list item */
\r
420 this.tabs[tabberIndex].li.className = this.classNavActive;
\r
426 tabberObj.prototype.navClearActive = function(tabberIndex)
\r
428 /* Note: this method does *not* enforce the rule
\r
429 that one nav should always be active.
\r
432 /* Remove classNavActive from the navigation list item */
\r
433 this.tabs[tabberIndex].li.className = '';
\r
439 /*==================================================*/
\r
442 function tabberAutomatic(tabberArgs)
\r
444 /* This function finds all DIV elements in the document where
\r
445 class=tabber.classMain, then converts them to use the tabber
\r
448 tabberArgs = an object to send to "new tabber()"
\r
451 tempObj, /* Temporary tabber object */
\r
452 divs, /* Array of all divs on the page */
\r
453 i; /* Loop index */
\r
455 if (!tabberArgs) { tabberArgs = {}; }
\r
457 /* Create a tabber object so we can get the value of classMain */
\r
458 tempObj = new tabberObj(tabberArgs);
\r
460 /* Find all DIV elements in the document that have class=tabber */
\r
462 /* First get an array of all DIV elements and loop through them */
\r
463 divs = document.getElementsByTagName("div");
\r
464 for (i=0; i < divs.length; i++) {
\r
466 /* Is this DIV the correct class? */
\r
467 if (divs[i].className &&
\r
468 divs[i].className.match(tempObj.REclassMain)) {
\r
470 /* Now tabify the DIV */
\r
471 tabberArgs.div = divs[i];
\r
472 divs[i].tabber = new tabberObj(tabberArgs);
\r
480 /*==================================================*/
\r
483 function tabberAutomaticOnLoad(tabberArgs)
\r
485 /* This function adds tabberAutomatic to the window.onload event,
\r
486 so it will run after the document has finished loading.
\r
490 if (!tabberArgs) { tabberArgs = {}; }
\r
492 /* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */
\r
494 oldOnLoad = window.onload;
\r
495 if (typeof window.onload != 'function') {
\r
496 window.onload = function() {
\r
497 tabberAutomatic(tabberArgs);
\r
500 window.onload = function() {
\r
502 tabberAutomatic(tabberArgs);
\r
508 /*==================================================*/
\r
511 /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
\r
513 if (typeof tabberOptions == 'undefined') {
\r
515 tabberAutomaticOnLoad();
\r
519 if (!tabberOptions['manualStartup']) {
\r
520 tabberAutomaticOnLoad(tabberOptions);
\r