Context Navigation

source: trunk/phpgwapi/js/dTabs/dTabs.js @ 2

Revision 2, 8.9 KB checked in by niltonneto, 17 years ago (diff)
Removida todas as tags usadas pelo CVS ($Id, $Source). Primeira versão no CVS externo.
Property svn:eol-style set to `native` Property svn:executable set to ``*

Line
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	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats: