|
1 /*================================================== |
|
2 $Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $ |
|
3 tabber.js by Patrick Fitzgerald pat@barelyfitz.com |
|
4 |
|
5 Documentation can be found at the following URL: |
|
6 http://www.barelyfitz.com/projects/tabber/ |
|
7 |
|
8 License (http://www.opensource.org/licenses/mit-license.php) |
|
9 |
|
10 Copyright (c) 2006 Patrick Fitzgerald |
|
11 |
|
12 Permission is hereby granted, free of charge, to any person |
|
13 obtaining a copy of this software and associated documentation files |
|
14 (the "Software"), to deal in the Software without restriction, |
|
15 including without limitation the rights to use, copy, modify, merge, |
|
16 publish, distribute, sublicense, and/or sell copies of the Software, |
|
17 and to permit persons to whom the Software is furnished to do so, |
|
18 subject to the following conditions: |
|
19 |
|
20 The above copyright notice and this permission notice shall be |
|
21 included in all copies or substantial portions of the Software. |
|
22 |
|
23 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
|
24 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF |
|
25 MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
|
26 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS |
|
27 BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN |
|
28 ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN |
|
29 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|
30 SOFTWARE. |
|
31 ==================================================*/ |
|
32 |
|
33 function tabberObj(argsObj) |
|
34 { |
|
35 var arg; /* name of an argument to override */ |
|
36 |
|
37 /* Element for the main tabber div. If you supply this in argsObj, |
|
38 then the init() method will be called. |
|
39 */ |
|
40 this.div = null; |
|
41 |
|
42 /* Class of the main tabber div */ |
|
43 this.classMain = "tabber"; |
|
44 |
|
45 /* Rename classMain to classMainLive after tabifying |
|
46 (so a different style can be applied) |
|
47 */ |
|
48 this.classMainLive = "tabberlive"; |
|
49 |
|
50 /* Class of each DIV that contains a tab */ |
|
51 this.classTab = "tabbertab"; |
|
52 |
|
53 /* Class to indicate which tab should be active on startup */ |
|
54 this.classTabDefault = "tabbertabdefault"; |
|
55 |
|
56 /* Class for the navigation UL */ |
|
57 this.classNav = "tabbernav"; |
|
58 |
|
59 /* When a tab is to be hidden, instead of setting display='none', we |
|
60 set the class of the div to classTabHide. In your screen |
|
61 stylesheet you should set classTabHide to display:none. In your |
|
62 print stylesheet you should set display:block to ensure that all |
|
63 the information is printed. |
|
64 */ |
|
65 this.classTabHide = "tabbertabhide"; |
|
66 |
|
67 /* Class to set the navigation LI when the tab is active, so you can |
|
68 use a different style on the active tab. |
|
69 */ |
|
70 this.classNavActive = "tabberactive"; |
|
71 |
|
72 /* Elements that might contain the title for the tab, only used if a |
|
73 title is not specified in the TITLE attribute of DIV classTab. |
|
74 */ |
|
75 this.titleElements = ['h2','h3','h4','h5','h6']; |
|
76 |
|
77 /* Should we strip out the HTML from the innerHTML of the title elements? |
|
78 This should usually be true. |
|
79 */ |
|
80 this.titleElementsStripHTML = true; |
|
81 |
|
82 /* If the user specified the tab names using a TITLE attribute on |
|
83 the DIV, then the browser will display a tooltip whenever the |
|
84 mouse is over the DIV. To prevent this tooltip, we can remove the |
|
85 TITLE attribute after getting the tab name. |
|
86 */ |
|
87 this.removeTitle = true; |
|
88 |
|
89 /* If you want to add an id to each link set this to true */ |
|
90 this.addLinkId = false; |
|
91 |
|
92 /* If addIds==true, then you can set a format for the ids. |
|
93 <tabberid> will be replaced with the id of the main tabber div. |
|
94 <tabnumberzero> will be replaced with the tab number |
|
95 (tab numbers starting at zero) |
|
96 <tabnumberone> will be replaced with the tab number |
|
97 (tab numbers starting at one) |
|
98 <tabtitle> will be replaced by the tab title |
|
99 (with all non-alphanumeric characters removed) |
|
100 */ |
|
101 this.linkIdFormat = '<tabberid>nav<tabnumberone>'; |
|
102 |
|
103 /* You can override the defaults listed above by passing in an object: |
|
104 var mytab = new tabber({property:value,property:value}); |
|
105 */ |
|
106 for (arg in argsObj) { this[arg] = argsObj[arg]; } |
|
107 |
|
108 /* Create regular expressions for the class names; Note: if you |
|
109 change the class names after a new object is created you must |
|
110 also change these regular expressions. |
|
111 */ |
|
112 this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi'); |
|
113 this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi'); |
|
114 this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi'); |
|
115 this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi'); |
|
116 this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi'); |
|
117 |
|
118 /* Array of objects holding info about each tab */ |
|
119 this.tabs = new Array(); |
|
120 |
|
121 /* If the main tabber div was specified, call init() now */ |
|
122 if (this.div) { |
|
123 |
|
124 this.init(this.div); |
|
125 |
|
126 /* We don't need the main div anymore, and to prevent a memory leak |
|
127 in IE, we must remove the circular reference between the div |
|
128 and the tabber object. */ |
|
129 this.div = null; |
|
130 } |
|
131 } |
|
132 |
|
133 |
|
134 /*-------------------------------------------------- |
|
135 Methods for tabberObj |
|
136 --------------------------------------------------*/ |
|
137 |
|
138 |
|
139 tabberObj.prototype.init = function(e) |
|
140 { |
|
141 /* Set up the tabber interface. |
|
142 |
|
143 e = element (the main containing div) |
|
144 |
|
145 Example: |
|
146 init(document.getElementById('mytabberdiv')) |
|
147 */ |
|
148 |
|
149 var |
|
150 childNodes, /* child nodes of the tabber div */ |
|
151 i, i2, /* loop indices */ |
|
152 t, /* object to store info about a single tab */ |
|
153 defaultTab=0, /* which tab to select by default */ |
|
154 DOM_ul, /* tabbernav list */ |
|
155 DOM_li, /* tabbernav list item */ |
|
156 DOM_a, /* tabbernav link */ |
|
157 aId, /* A unique id for DOM_a */ |
|
158 headingElement; /* searching for text to use in the tab */ |
|
159 |
|
160 /* Verify that the browser supports DOM scripting */ |
|
161 if (!document.getElementsByTagName) { return false; } |
|
162 |
|
163 /* If the main DIV has an ID then save it. */ |
|
164 if (e.id) { |
|
165 this.id = e.id; |
|
166 } |
|
167 |
|
168 /* Clear the tabs array (but it should normally be empty) */ |
|
169 this.tabs.length = 0; |
|
170 |
|
171 /* Loop through an array of all the child nodes within our tabber element. */ |
|
172 childNodes = e.childNodes; |
|
173 for(i=0; i < childNodes.length; i++) { |
|
174 |
|
175 /* Find the nodes where class="tabbertab" */ |
|
176 if(childNodes[i].className && |
|
177 childNodes[i].className.match(this.REclassTab)) { |
|
178 |
|
179 /* Create a new object to save info about this tab */ |
|
180 t = new Object(); |
|
181 |
|
182 /* Save a pointer to the div for this tab */ |
|
183 t.div = childNodes[i]; |
|
184 |
|
185 /* Add the new object to the array of tabs */ |
|
186 this.tabs[this.tabs.length] = t; |
|
187 |
|
188 /* If the class name contains classTabDefault, |
|
189 then select this tab by default. |
|
190 */ |
|
191 if (childNodes[i].className.match(this.REclassTabDefault)) { |
|
192 defaultTab = this.tabs.length-1; |
|
193 } |
|
194 } |
|
195 } |
|
196 |
|
197 /* Create a new UL list to hold the tab headings */ |
|
198 DOM_ul = document.createElement("ul"); |
|
199 DOM_ul.className = this.classNav; |
|
200 |
|
201 /* Loop through each tab we found */ |
|
202 for (i=0; i < this.tabs.length; i++) { |
|
203 |
|
204 t = this.tabs[i]; |
|
205 |
|
206 /* Get the label to use for this tab: |
|
207 From the title attribute on the DIV, |
|
208 Or from one of the this.titleElements[] elements, |
|
209 Or use an automatically generated number. |
|
210 */ |
|
211 t.headingText = t.div.title; |
|
212 |
|
213 /* Remove the title attribute to prevent a tooltip from appearing */ |
|
214 if (this.removeTitle) { t.div.title = ''; } |
|
215 |
|
216 if (!t.headingText) { |
|
217 |
|
218 /* Title was not defined in the title of the DIV, |
|
219 So try to get the title from an element within the DIV. |
|
220 Go through the list of elements in this.titleElements |
|
221 (typically heading elements ['h2','h3','h4']) |
|
222 */ |
|
223 for (i2=0; i2<this.titleElements.length; i2++) { |
|
224 headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0]; |
|
225 if (headingElement) { |
|
226 t.headingText = headingElement.innerHTML; |
|
227 if (this.titleElementsStripHTML) { |
|
228 t.headingText.replace(/<br>/gi," "); |
|
229 t.headingText = t.headingText.replace(/<[^>]+>/g,""); |
|
230 } |
|
231 break; |
|
232 } |
|
233 } |
|
234 } |
|
235 |
|
236 if (!t.headingText) { |
|
237 /* Title was not found (or is blank) so automatically generate a |
|
238 number for the tab. |
|
239 */ |
|
240 t.headingText = i + 1; |
|
241 } |
|
242 |
|
243 /* Create a list element for the tab */ |
|
244 DOM_li = document.createElement("li"); |
|
245 |
|
246 /* Save a reference to this list item so we can later change it to |
|
247 the "active" class */ |
|
248 t.li = DOM_li; |
|
249 |
|
250 /* Create a link to activate the tab */ |
|
251 DOM_a = document.createElement("a"); |
|
252 DOM_a.appendChild(document.createTextNode(t.headingText)); |
|
253 DOM_a.href = "javascript:void(null);"; |
|
254 DOM_a.title = t.headingText; |
|
255 DOM_a.onclick = this.navClick; |
|
256 |
|
257 /* Add some properties to the link so we can identify which tab |
|
258 was clicked. Later the navClick method will need this. |
|
259 */ |
|
260 DOM_a.tabber = this; |
|
261 DOM_a.tabberIndex = i; |
|
262 |
|
263 /* Do we need to add an id to DOM_a? */ |
|
264 if (this.addLinkId && this.linkIdFormat) { |
|
265 |
|
266 /* Determine the id name */ |
|
267 aId = this.linkIdFormat; |
|
268 aId = aId.replace(/<tabberid>/gi, this.id); |
|
269 aId = aId.replace(/<tabnumberzero>/gi, i); |
|
270 aId = aId.replace(/<tabnumberone>/gi, i+1); |
|
271 aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, '')); |
|
272 |
|
273 DOM_a.id = aId; |
|
274 } |
|
275 |
|
276 /* Add the link to the list element */ |
|
277 DOM_li.appendChild(DOM_a); |
|
278 |
|
279 /* Add the list element to the list */ |
|
280 DOM_ul.appendChild(DOM_li); |
|
281 } |
|
282 |
|
283 /* Add the UL list to the beginning of the tabber div */ |
|
284 e.insertBefore(DOM_ul, e.firstChild); |
|
285 |
|
286 /* Make the tabber div "live" so different CSS can be applied */ |
|
287 e.className = e.className.replace(this.REclassMain, this.classMainLive); |
|
288 |
|
289 /* Activate the default tab, and do not call the onclick handler */ |
|
290 this.tabShow(defaultTab); |
|
291 |
|
292 /* If the user specified an onLoad function, call it now. */ |
|
293 if (typeof this.onLoad == 'function') { |
|
294 this.onLoad({tabber:this}); |
|
295 } |
|
296 |
|
297 return this; |
|
298 }; |
|
299 |
|
300 |
|
301 tabberObj.prototype.navClick = function(event) |
|
302 { |
|
303 /* This method should only be called by the onClick event of an <A> |
|
304 element, in which case we will determine which tab was clicked by |
|
305 examining a property that we previously attached to the <A> |
|
306 element. |
|
307 |
|
308 Since this was triggered from an onClick event, the variable |
|
309 "this" refers to the <A> element that triggered the onClick |
|
310 event (and not to the tabberObj). |
|
311 |
|
312 When tabberObj was initialized, we added some extra properties |
|
313 to the <A> element, for the purpose of retrieving them now. Get |
|
314 the tabberObj object, plus the tab number that was clicked. |
|
315 */ |
|
316 |
|
317 var |
|
318 rVal, /* Return value from the user onclick function */ |
|
319 a, /* element that triggered the onclick event */ |
|
320 self, /* the tabber object */ |
|
321 tabberIndex, /* index of the tab that triggered the event */ |
|
322 onClickArgs; /* args to send the onclick function */ |
|
323 |
|
324 a = this; |
|
325 if (!a.tabber) { return false; } |
|
326 |
|
327 self = a.tabber; |
|
328 tabberIndex = a.tabberIndex; |
|
329 |
|
330 /* Remove focus from the link because it looks ugly. |
|
331 I don't know if this is a good idea... |
|
332 */ |
|
333 a.blur(); |
|
334 |
|
335 /* If the user specified an onClick function, call it now. |
|
336 If the function returns false then do not continue. |
|
337 */ |
|
338 if (typeof self.onClick == 'function') { |
|
339 |
|
340 onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event}; |
|
341 |
|
342 /* IE uses a different way to access the event object */ |
|
343 if (!event) { onClickArgs.event = window.event; } |
|
344 |
|
345 rVal = self.onClick(onClickArgs); |
|
346 if (rVal === false) { return false; } |
|
347 } |
|
348 |
|
349 self.tabShow(tabberIndex); |
|
350 |
|
351 return false; |
|
352 }; |
|
353 |
|
354 |
|
355 tabberObj.prototype.tabHideAll = function() |
|
356 { |
|
357 var i; /* counter */ |
|
358 |
|
359 /* Hide all tabs and make all navigation links inactive */ |
|
360 for (i = 0; i < this.tabs.length; i++) { |
|
361 this.tabHide(i); |
|
362 } |
|
363 }; |
|
364 |
|
365 |
|
366 tabberObj.prototype.tabHide = function(tabberIndex) |
|
367 { |
|
368 var div; |
|
369 |
|
370 if (!this.tabs[tabberIndex]) { return false; } |
|
371 |
|
372 /* Hide a single tab and make its navigation link inactive */ |
|
373 div = this.tabs[tabberIndex].div; |
|
374 |
|
375 /* Hide the tab contents by adding classTabHide to the div */ |
|
376 if (!div.className.match(this.REclassTabHide)) { |
|
377 div.className += ' ' + this.classTabHide; |
|
378 } |
|
379 this.navClearActive(tabberIndex); |
|
380 |
|
381 return this; |
|
382 }; |
|
383 |
|
384 |
|
385 tabberObj.prototype.tabShow = function(tabberIndex) |
|
386 { |
|
387 /* Show the tabberIndex tab and hide all the other tabs */ |
|
388 |
|
389 var div; |
|
390 |
|
391 if (!this.tabs[tabberIndex]) { return false; } |
|
392 |
|
393 /* Hide all the tabs first */ |
|
394 this.tabHideAll(); |
|
395 |
|
396 /* Get the div that holds this tab */ |
|
397 div = this.tabs[tabberIndex].div; |
|
398 |
|
399 /* Remove classTabHide from the div */ |
|
400 div.className = div.className.replace(this.REclassTabHide, ''); |
|
401 |
|
402 /* Mark this tab navigation link as "active" */ |
|
403 this.navSetActive(tabberIndex); |
|
404 |
|
405 /* If the user specified an onTabDisplay function, call it now. */ |
|
406 if (typeof this.onTabDisplay == 'function') { |
|
407 this.onTabDisplay({'tabber':this, 'index':tabberIndex}); |
|
408 } |
|
409 |
|
410 return this; |
|
411 }; |
|
412 |
|
413 tabberObj.prototype.navSetActive = function(tabberIndex) |
|
414 { |
|
415 /* Note: this method does *not* enforce the rule |
|
416 that only one nav item can be active at a time. |
|
417 */ |
|
418 |
|
419 /* Set classNavActive for the navigation list item */ |
|
420 this.tabs[tabberIndex].li.className = this.classNavActive; |
|
421 |
|
422 return this; |
|
423 }; |
|
424 |
|
425 |
|
426 tabberObj.prototype.navClearActive = function(tabberIndex) |
|
427 { |
|
428 /* Note: this method does *not* enforce the rule |
|
429 that one nav should always be active. |
|
430 */ |
|
431 |
|
432 /* Remove classNavActive from the navigation list item */ |
|
433 this.tabs[tabberIndex].li.className = ''; |
|
434 |
|
435 return this; |
|
436 }; |
|
437 |
|
438 |
|
439 /*==================================================*/ |
|
440 |
|
441 |
|
442 function tabberAutomatic(tabberArgs) |
|
443 { |
|
444 /* This function finds all DIV elements in the document where |
|
445 class=tabber.classMain, then converts them to use the tabber |
|
446 interface. |
|
447 |
|
448 tabberArgs = an object to send to "new tabber()" |
|
449 */ |
|
450 var |
|
451 tempObj, /* Temporary tabber object */ |
|
452 divs, /* Array of all divs on the page */ |
|
453 i; /* Loop index */ |
|
454 |
|
455 if (!tabberArgs) { tabberArgs = {}; } |
|
456 |
|
457 /* Create a tabber object so we can get the value of classMain */ |
|
458 tempObj = new tabberObj(tabberArgs); |
|
459 |
|
460 /* Find all DIV elements in the document that have class=tabber */ |
|
461 |
|
462 /* First get an array of all DIV elements and loop through them */ |
|
463 divs = document.getElementsByTagName("div"); |
|
464 for (i=0; i < divs.length; i++) { |
|
465 |
|
466 /* Is this DIV the correct class? */ |
|
467 if (divs[i].className && |
|
468 divs[i].className.match(tempObj.REclassMain)) { |
|
469 |
|
470 /* Now tabify the DIV */ |
|
471 tabberArgs.div = divs[i]; |
|
472 divs[i].tabber = new tabberObj(tabberArgs); |
|
473 } |
|
474 } |
|
475 |
|
476 return this; |
|
477 } |
|
478 |
|
479 |
|
480 /*==================================================*/ |
|
481 |
|
482 |
|
483 function tabberAutomaticOnLoad(tabberArgs) |
|
484 { |
|
485 /* This function adds tabberAutomatic to the window.onload event, |
|
486 so it will run after the document has finished loading. |
|
487 */ |
|
488 var oldOnLoad; |
|
489 |
|
490 if (!tabberArgs) { tabberArgs = {}; } |
|
491 |
|
492 /* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */ |
|
493 |
|
494 oldOnLoad = window.onload; |
|
495 if (typeof window.onload != 'function') { |
|
496 window.onload = function() { |
|
497 tabberAutomatic(tabberArgs); |
|
498 }; |
|
499 } else { |
|
500 window.onload = function() { |
|
501 oldOnLoad(); |
|
502 tabberAutomatic(tabberArgs); |
|
503 }; |
|
504 } |
|
505 } |
|
506 |
|
507 |
|
508 /*==================================================*/ |
|
509 |
|
510 |
|
511 /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ |
|
512 |
|
513 if (typeof tabberOptions == 'undefined') { |
|
514 |
|
515 tabberAutomaticOnLoad(); |
|
516 |
|
517 } else { |
|
518 |
|
519 if (!tabberOptions['manualStartup']) { |
|
520 tabberAutomaticOnLoad(tabberOptions); |
|
521 } |
|
522 |
|
523 } |