1 | /****************************************************************************\ |
---|
2 | * Dynamic Tabs - Javascript Object * |
---|
3 | * * |
---|
4 | * Written by: * |
---|
5 | * - Raphael Derosso Pereira <raphaelpereira@users.sourceforge.net> * |
---|
6 | * ------------------------------------------------------------------------ * |
---|
7 | * This program is free software; you can redistribute it and/or modify it * |
---|
8 | * under the terms of the GNU General Public License as published by the * |
---|
9 | * Free Software Foundation; either version 2 of the License, or (at your * |
---|
10 | * option) any later version. * |
---|
11 | \****************************************************************************/ |
---|
12 | |
---|
13 | /* |
---|
14 | * Dynamic Tabs - On-The-Fly Tabs in Javascript |
---|
15 | * |
---|
16 | * Usage: |
---|
17 | * var tabs = new dTabsManager({'id': <DIV id to be used>, 'width': '498px'}); |
---|
18 | * |
---|
19 | * tabs.addTab({'id': <ID of the Contents DIV (must be absolute)>, |
---|
20 | * 'name': <text to be shown on tab selector>, |
---|
21 | * 'selectedClass': <name of the class to be used when Tab is selected>, |
---|
22 | * 'unselectedClass': <name of the class to be used when Tab is not selected>}); |
---|
23 | */ |
---|
24 | |
---|
25 | if (document.all) |
---|
26 | { |
---|
27 | navigator.userAgent.toLowerCase().indexOf('msie 5') != -1 ? is_ie5 = true : is_ie5 = false; |
---|
28 | is_ie = true; |
---|
29 | is_moz1_6 = false; |
---|
30 | is_mozilla = false; |
---|
31 | is_ns4 = false; |
---|
32 | } |
---|
33 | else if (document.getElementById) |
---|
34 | { |
---|
35 | navigator.userAgent.toLowerCase().match('mozilla.*rv[:]1\.6.*gecko') ? is_moz1_6 = true : is_moz1_6 = false; |
---|
36 | is_ie = false; |
---|
37 | is_ie5 = false; |
---|
38 | is_mozilla = true; |
---|
39 | is_ns4 = false; |
---|
40 | } |
---|
41 | else if (document.layers) |
---|
42 | { |
---|
43 | is_ie = false; |
---|
44 | is_ie5 = false |
---|
45 | is_moz1_6 = false; |
---|
46 | is_mozilla = false; |
---|
47 | is_ns4 = true; |
---|
48 | } |
---|
49 | |
---|
50 | /* The code below is a wrapper to call the dTabs content insertion |
---|
51 | * just after the document is loaded in IE... I still don't know why people |
---|
52 | * use this crap! |
---|
53 | */ |
---|
54 | var _dTabs_onload; |
---|
55 | |
---|
56 | if (document.all) |
---|
57 | { |
---|
58 | _dTabs_onload = false; |
---|
59 | |
---|
60 | var _dTabs_onload_f = document.body.onload; |
---|
61 | var _dTabs_f = function(e) |
---|
62 | { |
---|
63 | _dTabs_onload = true; |
---|
64 | |
---|
65 | if (_dTabs_onload_f) |
---|
66 | { |
---|
67 | _dTabs_onload_f(); |
---|
68 | } |
---|
69 | }; |
---|
70 | |
---|
71 | document.body.onload = _dTabs_f; |
---|
72 | } |
---|
73 | else |
---|
74 | { |
---|
75 | _dTabs_onload = true; |
---|
76 | } |
---|
77 | |
---|
78 | function dTabsManager(params) |
---|
79 | { |
---|
80 | /* Attributes definition */ |
---|
81 | this._Tabs = new Array(); |
---|
82 | this._Tabs['root'] = null; |
---|
83 | this._Tabs['tabIndexTR'] = null; |
---|
84 | this._Tabs['tabIndexTDs'] = new Array(); |
---|
85 | this._Tabs['contents'] = null; |
---|
86 | this._Tabs['contentsDIV'] = null; |
---|
87 | this._selectedIndex = null; |
---|
88 | |
---|
89 | this._nTabs = params['nTabs'] ? params['nTabs'] : 0; |
---|
90 | this._maxTabs = params['maxTabs'] ? params['maxTabs'] : 0; |
---|
91 | |
---|
92 | |
---|
93 | /* Create and insert the container */ |
---|
94 | var table, tbody, tr, td; |
---|
95 | |
---|
96 | this._Tabs['root'] = document.createElement('div'); |
---|
97 | this._Tabs['root'].id = params['id']; |
---|
98 | this._Tabs['root'].style.position = 'absolute'; |
---|
99 | //this._Tabs['root'].style.visibility = 'hidden'; |
---|
100 | this._Tabs['root'].style.top = '150px'; |
---|
101 | this._Tabs['root'].style.left = '0px'; |
---|
102 | this._Tabs['root'].style.width = params['width'] ? params['width'] : 0; |
---|
103 | |
---|
104 | table = document.createElement('table'); |
---|
105 | tbody = document.createElement('tbody'); |
---|
106 | table.style.border = '0px solid black'; |
---|
107 | table.style.width = '100%'; |
---|
108 | table.style.height = '100%'; |
---|
109 | |
---|
110 | this._Tabs['tabIndexTR'] = document.createElement('tr'); |
---|
111 | this._Tabs['tabIndexTR'].style.height = '30px'; |
---|
112 | //this._Tabs['tabIndexTR'].style.width = '100%'; |
---|
113 | |
---|
114 | tr = document.createElement('tr'); |
---|
115 | td = document.createElement('td'); |
---|
116 | |
---|
117 | tr.style.width = '100%'; |
---|
118 | tr.style.height = '100%'; |
---|
119 | |
---|
120 | //this._Tabs['contentsDIV'] = document.createElement('div'); |
---|
121 | //this._Tabs['contentsDIV'].style.position = 'relative'; |
---|
122 | this._Tabs['contentsDIV'] = td; |
---|
123 | |
---|
124 | this._Tabs['root'].appendChild(table); |
---|
125 | table.appendChild(tbody); |
---|
126 | tbody.appendChild(this._Tabs['tabIndexTR']); |
---|
127 | tbody.appendChild(tr); |
---|
128 | tr.appendChild(td); |
---|
129 | //td.appendChild(this._Tabs['contentsDIV']); |
---|
130 | tr.appendChild(this._Tabs['contentsDIV']); |
---|
131 | |
---|
132 | this._Tabs['contents'] = new Array(); |
---|
133 | |
---|
134 | if (!_dTabs_onload) |
---|
135 | { |
---|
136 | if (document.getElementById && !document.all) |
---|
137 | { |
---|
138 | document.body.appendChild(this._Tabs['root']); |
---|
139 | } |
---|
140 | else |
---|
141 | { |
---|
142 | var _this = this; |
---|
143 | var now = document.body.onload ? document.body.onload : null; |
---|
144 | var f = function(e) |
---|
145 | { |
---|
146 | document.body.appendChild(_this._Tabs['root']); |
---|
147 | now ? now() : false; |
---|
148 | }; |
---|
149 | |
---|
150 | document.body.onload = f; |
---|
151 | } |
---|
152 | } |
---|
153 | else |
---|
154 | { |
---|
155 | document.body.appendChild(this._Tabs['root']); |
---|
156 | } |
---|
157 | } |
---|
158 | |
---|
159 | /* |
---|
160 | @method addTab |
---|
161 | @abstract Inserts a tab |
---|
162 | */ |
---|
163 | dTabsManager.prototype.addTab = function (params) |
---|
164 | { |
---|
165 | if (typeof(params) != 'object') |
---|
166 | { |
---|
167 | return false; |
---|
168 | } |
---|
169 | |
---|
170 | if (!params['id'] || !_dtElement(params['id']) || |
---|
171 | _dtElement(params['id']).tagName.toLowerCase() != 'div' || |
---|
172 | _dtElement(params['id']).style.position.toLowerCase() != 'absolute') |
---|
173 | { |
---|
174 | return false; |
---|
175 | } |
---|
176 | |
---|
177 | if (this._Tabs['contents'][params['id']]) |
---|
178 | { |
---|
179 | this.replaceTab(params); |
---|
180 | return; |
---|
181 | } |
---|
182 | |
---|
183 | //var contents, tdIndex; |
---|
184 | var element = _dtElement(params['id']); |
---|
185 | |
---|
186 | if (is_moz1_6) |
---|
187 | {/* |
---|
188 | var element_ = element; |
---|
189 | element = element.cloneNode(true); |
---|
190 | //element_.parentNode.replaceChild(element, element_); |
---|
191 | element_.id = element_.id+'CLONED'; |
---|
192 | element_.style.display = 'none';*/ |
---|
193 | element.style.position = 'absolute'; |
---|
194 | } |
---|
195 | else |
---|
196 | { |
---|
197 | element.parentNode.removeChild(element); |
---|
198 | } |
---|
199 | element.style.top = parseInt(this._Tabs['tabIndexTR'].style.height) + 5 + 'px'; |
---|
200 | element.style.left = this._Tabs['root'].style.left; |
---|
201 | element.style.zIndex = '-1'; |
---|
202 | |
---|
203 | this._Tabs['contents'][params['id']] = element; |
---|
204 | |
---|
205 | this._Tabs.tabIndexTDs[params['id']] = document.createElement('td'); |
---|
206 | |
---|
207 | var _this = this; |
---|
208 | this._Tabs.tabIndexTDs[params['id']].innerHTML = params['name'] ? params['name'] : 'undefined'; |
---|
209 | this._Tabs.tabIndexTDs[params['id']].selectedClassName = params['selectedClass']; |
---|
210 | this._Tabs.tabIndexTDs[params['id']].unselectedClassName = params['unselectedClass']; |
---|
211 | this._Tabs.tabIndexTDs[params['id']].className = params['unselectedClass']; |
---|
212 | this._Tabs.tabIndexTDs[params['id']].onclick = function() {_this._showTab(params['id']);}; |
---|
213 | |
---|
214 | for (var i in this._Tabs.tabIndexTDs) |
---|
215 | { |
---|
216 | if (i == 'length') |
---|
217 | { |
---|
218 | return; |
---|
219 | } |
---|
220 | |
---|
221 | this._Tabs.tabIndexTDs[i].style.width = (100/(this._nTabs+1)) + '%'; |
---|
222 | } |
---|
223 | |
---|
224 | this._Tabs.tabIndexTR.appendChild(this._Tabs.tabIndexTDs[params['id']]); |
---|
225 | |
---|
226 | if (!is_moz1_6) |
---|
227 | { |
---|
228 | this._Tabs.contentsDIV.appendChild(this._Tabs['contents'][params['id']]); |
---|
229 | } |
---|
230 | |
---|
231 | this._nTabs++; |
---|
232 | |
---|
233 | if (this._nTabs == 1) |
---|
234 | { |
---|
235 | this._showTab(params['id']); |
---|
236 | } |
---|
237 | |
---|
238 | return; |
---|
239 | } |
---|
240 | |
---|
241 | dTabsManager.prototype.removeTab = function (id) |
---|
242 | { |
---|
243 | if (!this._Tabs.contents[params['id']]) |
---|
244 | { |
---|
245 | return false; |
---|
246 | } |
---|
247 | |
---|
248 | this._Tabs.tabIndexTR.removeChild(this._Tabs.tabIndexTDs[params['id']]); |
---|
249 | this._Tabs.contentsDIV.removeChild(this._Tabs.contents[params['id']]); |
---|
250 | this._Tabs.contents[params['id']] = null; |
---|
251 | this._Tabs.tabIndexTDs[params['id']] = null; |
---|
252 | |
---|
253 | return true; |
---|
254 | } |
---|
255 | |
---|
256 | dTabsManager.prototype.getTabObject = function() |
---|
257 | { |
---|
258 | return this._Tabs.root; |
---|
259 | } |
---|
260 | |
---|
261 | /****************************************************************************\ |
---|
262 | * Private Methods * |
---|
263 | \****************************************************************************/ |
---|
264 | |
---|
265 | dTabsManager.prototype._showTab = function (id) |
---|
266 | { |
---|
267 | if (!this._Tabs.contents[id]) |
---|
268 | { |
---|
269 | return false; |
---|
270 | } |
---|
271 | |
---|
272 | /* Ajust the tabIndexTR width to be the same as the contents width*/ |
---|
273 | if (this._Tabs.contents[id].style.width) |
---|
274 | { |
---|
275 | this._Tabs['root'].style.width = this._Tabs.contents[id].style.width; |
---|
276 | this._Tabs['root'].style.height = this._Tabs.contents[id].style.height; |
---|
277 | } |
---|
278 | /* |
---|
279 | else |
---|
280 | { |
---|
281 | this._Tabs['root'].style.width = '0px'; |
---|
282 | }*/ |
---|
283 | |
---|
284 | this._Tabs.tabIndexTDs[id].className = this._Tabs.tabIndexTDs[id].selectedClassName; |
---|
285 | |
---|
286 | for (var i in this._Tabs.contents) |
---|
287 | { |
---|
288 | if (i == 'length') |
---|
289 | { |
---|
290 | continue; |
---|
291 | } |
---|
292 | |
---|
293 | this._Tabs.contents[i].style.visibility = 'hidden'; |
---|
294 | this._Tabs.contents[i].style.zIndex = '-1'; |
---|
295 | } |
---|
296 | |
---|
297 | this._Tabs.contents[id].style.visibility = 'visible'; |
---|
298 | this._Tabs.contents[id].style.zIndex = '10'; |
---|
299 | |
---|
300 | if (this._selectedIndex && this._selectedIndex != id) |
---|
301 | { |
---|
302 | this._Tabs.tabIndexTDs[this._selectedIndex].className = this._Tabs.tabIndexTDs[this._selectedIndex].unselectedClassName; |
---|
303 | if (!document.all) |
---|
304 | { |
---|
305 | this._focus(this._Tabs.contents[id]); |
---|
306 | } |
---|
307 | } |
---|
308 | |
---|
309 | this._selectedIndex = id; |
---|
310 | } |
---|
311 | |
---|
312 | dTabsManager.prototype._focus = function(obj) |
---|
313 | { |
---|
314 | for (var i in obj.childNodes) |
---|
315 | { |
---|
316 | if (obj.childNodes[i].focus) |
---|
317 | { |
---|
318 | obj.childNodes[i].focus(); |
---|
319 | return true; |
---|
320 | } |
---|
321 | else |
---|
322 | { |
---|
323 | if (this._focus(obj.childNodes[i])) |
---|
324 | { |
---|
325 | return true; |
---|
326 | } |
---|
327 | } |
---|
328 | } |
---|
329 | } |
---|
330 | |
---|
331 | function _dtElement(id) |
---|
332 | { |
---|
333 | if (document.getElementById) |
---|
334 | { |
---|
335 | return document.getElementById(id); |
---|
336 | } |
---|
337 | else if (document.all) |
---|
338 | { |
---|
339 | return document.all[id]; |
---|
340 | } |
---|
341 | else |
---|
342 | { |
---|
343 | throw('Browser not supported'); |
---|
344 | } |
---|
345 | } |
---|