1 | /************************************************************************************************************ |
---|
2 | (C) www.dhtmlgoodies.com, October 2005 |
---|
3 | |
---|
4 | This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. |
---|
5 | |
---|
6 | Terms of use: |
---|
7 | You are free to use this script as long as the copyright message is kept intact. However, you may not |
---|
8 | redistribute, sell or repost it without our permission. |
---|
9 | |
---|
10 | Updated: |
---|
11 | |
---|
12 | March, 14th, 2006 - Create new tabs dynamically |
---|
13 | March, 15th, 2006 - Dynamically delete a tab |
---|
14 | |
---|
15 | Thank you! |
---|
16 | |
---|
17 | www.dhtmlgoodies.com |
---|
18 | Alf Magne Kalleland |
---|
19 | |
---|
20 | ************************************************************************************************************/ |
---|
21 | var textPadding = 3; // Padding at the left of tab text - bigger value gives you wider tabs |
---|
22 | var strictDocType = true; |
---|
23 | var tabView_maxNumberOfTabs = 6; // Maximum number of tabs |
---|
24 | |
---|
25 | /* Don't change anything below here */ |
---|
26 | var dhtmlgoodies_tabObj = new Array(); |
---|
27 | var activeTabIndex = new Array(); |
---|
28 | var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false; |
---|
29 | |
---|
30 | var regExp = new RegExp(".*MSIE ([0-9]\.[0-9]).*","g"); |
---|
31 | var navigatorVersion = navigator.userAgent.replace(regExp,'$1'); |
---|
32 | |
---|
33 | var ajaxObjects = new Array(); |
---|
34 | var tabView_countTabs = new Array(); |
---|
35 | var tabViewHeight = new Array(); |
---|
36 | var tabDivCounter = 0; |
---|
37 | var closeImageHeight = 8; // Pixel height of close buttons |
---|
38 | var closeImageWidth = 8; // Pixel height of close buttons |
---|
39 | |
---|
40 | |
---|
41 | function setPadding(obj,padding){ |
---|
42 | var span = obj.getElementsByTagName('SPAN')[0]; |
---|
43 | span.style.paddingLeft = padding + 'px'; |
---|
44 | span.style.paddingRight = padding + 'px'; |
---|
45 | } |
---|
46 | function showTab(parentId,tabIndex) |
---|
47 | { |
---|
48 | var parentId_div = parentId + "_"; |
---|
49 | if(!document.getElementById('tabView' + parentId_div + tabIndex)){ |
---|
50 | return; |
---|
51 | } |
---|
52 | if(activeTabIndex[parentId]>=0){ |
---|
53 | if(activeTabIndex[parentId]==tabIndex){ |
---|
54 | return; |
---|
55 | } |
---|
56 | |
---|
57 | var obj = document.getElementById('tabTab'+parentId_div + activeTabIndex[parentId]); |
---|
58 | |
---|
59 | obj.className='tabInactive'; |
---|
60 | var img = obj.getElementsByTagName('IMG')[0]; |
---|
61 | if(img.src.indexOf('tab_')==-1)img = obj.getElementsByTagName('IMG')[1]; |
---|
62 | img.src = 'images/tab_right_inactive.gif'; |
---|
63 | document.getElementById('tabView' + parentId_div + activeTabIndex[parentId]).style.display='none'; |
---|
64 | } |
---|
65 | |
---|
66 | var thisObj = document.getElementById('tabTab'+ parentId_div +tabIndex); |
---|
67 | |
---|
68 | thisObj.className='tabActive'; |
---|
69 | var img = thisObj.getElementsByTagName('IMG')[0]; |
---|
70 | if(img.src.indexOf('tab_')==-1)img = thisObj.getElementsByTagName('IMG')[1]; |
---|
71 | img.src = 'images/tab_right_active.gif'; |
---|
72 | |
---|
73 | document.getElementById('tabView' + parentId_div + tabIndex).style.display='block'; |
---|
74 | activeTabIndex[parentId] = tabIndex; |
---|
75 | |
---|
76 | |
---|
77 | var parentObj = thisObj.parentNode; |
---|
78 | var aTab = parentObj.getElementsByTagName('DIV')[0]; |
---|
79 | countObjects = 0; |
---|
80 | var startPos = 2; |
---|
81 | var previousObjectActive = false; |
---|
82 | while(aTab){ |
---|
83 | if(aTab.tagName=='DIV'){ |
---|
84 | if(previousObjectActive){ |
---|
85 | previousObjectActive = false; |
---|
86 | startPos-=2; |
---|
87 | } |
---|
88 | if(aTab==thisObj){ |
---|
89 | startPos-=2; |
---|
90 | previousObjectActive=true; |
---|
91 | setPadding(aTab,textPadding+1); |
---|
92 | }else{ |
---|
93 | setPadding(aTab,textPadding); |
---|
94 | } |
---|
95 | |
---|
96 | aTab.style.left = startPos + 'px'; |
---|
97 | countObjects++; |
---|
98 | startPos+=2; |
---|
99 | } |
---|
100 | aTab = aTab.nextSibling; |
---|
101 | } |
---|
102 | |
---|
103 | return; |
---|
104 | } |
---|
105 | |
---|
106 | function tabClick() |
---|
107 | { |
---|
108 | var idArray = this.id.split('_'); |
---|
109 | showTab(this.parentNode.parentNode.id,idArray[idArray.length-1].replace(/[^0-9]/gi,'')); |
---|
110 | |
---|
111 | } |
---|
112 | |
---|
113 | function rolloverTab() |
---|
114 | { |
---|
115 | if(this.className.indexOf('tabInactive')>=0){ |
---|
116 | this.className='inactiveTabOver'; |
---|
117 | var img = this.getElementsByTagName('IMG')[0]; |
---|
118 | if(img.src.indexOf('tab_')<=0)img = this.getElementsByTagName('IMG')[1]; |
---|
119 | img.src = 'images/tab_right_over.gif'; |
---|
120 | } |
---|
121 | |
---|
122 | } |
---|
123 | function rolloutTab() |
---|
124 | { |
---|
125 | if(this.className == 'inactiveTabOver'){ |
---|
126 | this.className='tabInactive'; |
---|
127 | var img = this.getElementsByTagName('IMG')[0]; |
---|
128 | if(img.src.indexOf('tab_')<=0)img = this.getElementsByTagName('IMG')[1]; |
---|
129 | img.src = 'images/tab_right_inactive.gif'; |
---|
130 | } |
---|
131 | |
---|
132 | } |
---|
133 | |
---|
134 | function hoverTabViewCloseButton() |
---|
135 | { |
---|
136 | this.src = this.src.replace('close.gif','close_over.gif'); |
---|
137 | } |
---|
138 | |
---|
139 | function stopHoverTabViewCloseButton() |
---|
140 | { |
---|
141 | this.src = this.src.replace('close_over.gif','close.gif'); |
---|
142 | } |
---|
143 | |
---|
144 | function initTabs(mainContainerID,tabTitles,activeTab,width,height,closeButtonArray,additionalTab) |
---|
145 | { |
---|
146 | if(!closeButtonArray)closeButtonArray = new Array(); |
---|
147 | |
---|
148 | if(!additionalTab || additionalTab=='undefined'){ |
---|
149 | dhtmlgoodies_tabObj[mainContainerID] = document.getElementById(mainContainerID); |
---|
150 | width = width + ''; |
---|
151 | if(width.indexOf('%')<0)width= width + 'px'; |
---|
152 | dhtmlgoodies_tabObj[mainContainerID].style.width = width; |
---|
153 | |
---|
154 | height = height + ''; |
---|
155 | if(height.length>0){ |
---|
156 | if(height.indexOf('%')<0)height= height + 'px'; |
---|
157 | dhtmlgoodies_tabObj[mainContainerID].style.height = height; |
---|
158 | } |
---|
159 | |
---|
160 | |
---|
161 | tabViewHeight[mainContainerID] = height; |
---|
162 | |
---|
163 | var tabDiv = document.createElement('DIV'); |
---|
164 | var firstDiv = dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV')[0]; |
---|
165 | |
---|
166 | dhtmlgoodies_tabObj[mainContainerID].insertBefore(tabDiv,firstDiv); |
---|
167 | tabDiv.className = 'dhtmlgoodies_tabPane'; |
---|
168 | tabView_countTabs[mainContainerID] = 0; |
---|
169 | |
---|
170 | }else{ |
---|
171 | var tabDiv = dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV')[0]; |
---|
172 | var firstDiv = dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV')[1]; |
---|
173 | height = tabViewHeight[mainContainerID]; |
---|
174 | activeTab = tabView_countTabs[mainContainerID]; |
---|
175 | |
---|
176 | |
---|
177 | } |
---|
178 | |
---|
179 | |
---|
180 | |
---|
181 | for(var no=0;no<tabTitles.length;no++){ |
---|
182 | var aTab = document.createElement('DIV'); |
---|
183 | aTab.id = 'tabTab' + mainContainerID + "_" + (no + tabView_countTabs[mainContainerID]); |
---|
184 | aTab.onmouseover = rolloverTab; |
---|
185 | aTab.onmouseout = rolloutTab; |
---|
186 | aTab.onclick = tabClick; |
---|
187 | aTab.className='tabInactive'; |
---|
188 | tabDiv.appendChild(aTab); |
---|
189 | var span = document.createElement('SPAN'); |
---|
190 | span.innerHTML = tabTitles[no]; |
---|
191 | span.style.position = 'relative'; |
---|
192 | aTab.appendChild(span); |
---|
193 | |
---|
194 | if(closeButtonArray[no]){ |
---|
195 | var closeButton = document.createElement('IMG'); |
---|
196 | closeButton.src = 'images/close.gif'; |
---|
197 | closeButton.height = closeImageHeight + 'px'; |
---|
198 | closeButton.width = closeImageHeight + 'px'; |
---|
199 | closeButton.setAttribute('height',closeImageHeight); |
---|
200 | closeButton.setAttribute('width',closeImageHeight); |
---|
201 | closeButton.style.position='absolute'; |
---|
202 | closeButton.style.top = '6px'; |
---|
203 | closeButton.style.right = '0px'; |
---|
204 | closeButton.onmouseover = hoverTabViewCloseButton; |
---|
205 | closeButton.onmouseout = stopHoverTabViewCloseButton; |
---|
206 | |
---|
207 | span.innerHTML = span.innerHTML + ' '; |
---|
208 | |
---|
209 | var deleteTxt = span.innerHTML+''; |
---|
210 | |
---|
211 | closeButton.onclick = function(){ deleteTab(this.parentNode.innerHTML) }; |
---|
212 | span.appendChild(closeButton); |
---|
213 | } |
---|
214 | |
---|
215 | var img = document.createElement('IMG'); |
---|
216 | img.valign = 'bottom'; |
---|
217 | img.src = 'images/tab_right_inactive.gif'; |
---|
218 | // IE5.X FIX |
---|
219 | if((navigatorVersion && navigatorVersion<6) || (MSIE && !strictDocType)){ |
---|
220 | img.style.styleFloat = 'none'; |
---|
221 | img.style.position = 'relative'; |
---|
222 | img.style.top = '4px' |
---|
223 | span.style.paddingTop = '4px'; |
---|
224 | aTab.style.cursor = 'hand'; |
---|
225 | } // End IE5.x FIX |
---|
226 | aTab.appendChild(img); |
---|
227 | } |
---|
228 | |
---|
229 | var tabs = dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV'); |
---|
230 | var divCounter = 0; |
---|
231 | for(var no=0;no<tabs.length;no++){ |
---|
232 | if(tabs[no].className=='dhtmlgoodies_aTab' && tabs[no].parentNode.id == mainContainerID){ |
---|
233 | if(height.length>0)tabs[no].style.height = height; |
---|
234 | tabs[no].style.display='none'; |
---|
235 | tabs[no].id = 'tabView' + mainContainerID + "_" + divCounter; |
---|
236 | divCounter++; |
---|
237 | } |
---|
238 | } |
---|
239 | tabView_countTabs[mainContainerID] = tabView_countTabs[mainContainerID] + tabTitles.length; |
---|
240 | showTab(mainContainerID,activeTab); |
---|
241 | |
---|
242 | return activeTab; |
---|
243 | } |
---|
244 | |
---|
245 | function showAjaxTabContent(ajaxIndex,parentId,tabId) |
---|
246 | { |
---|
247 | var obj = document.getElementById('tabView'+parentId + '_' + tabId); |
---|
248 | obj.innerHTML = ajaxObjects[ajaxIndex].response; |
---|
249 | } |
---|
250 | |
---|
251 | function resetTabIds(parentId) |
---|
252 | { |
---|
253 | var tabTitleCounter = 0; |
---|
254 | var tabContentCounter = 0; |
---|
255 | |
---|
256 | |
---|
257 | var divs = dhtmlgoodies_tabObj[parentId].getElementsByTagName('DIV'); |
---|
258 | |
---|
259 | |
---|
260 | for(var no=0;no<divs.length;no++){ |
---|
261 | if(divs[no].className=='dhtmlgoodies_aTab'){ |
---|
262 | divs[no].id = 'tabView' + parentId + '_' + tabTitleCounter; |
---|
263 | tabTitleCounter++; |
---|
264 | } |
---|
265 | if(divs[no].id.indexOf('tabTab')>=0){ |
---|
266 | divs[no].id = 'tabTab' + parentId + '_' + tabContentCounter; |
---|
267 | tabContentCounter++; |
---|
268 | } |
---|
269 | |
---|
270 | |
---|
271 | } |
---|
272 | |
---|
273 | tabView_countTabs[parentId] = tabContentCounter; |
---|
274 | } |
---|
275 | |
---|
276 | |
---|
277 | function createNewTab(parentId,tabTitle,tabContent,tabContentUrl,closeButton) |
---|
278 | { |
---|
279 | if(tabView_countTabs[parentId]>=tabView_maxNumberOfTabs)return; // Maximum number of tabs reached - return |
---|
280 | var div = document.createElement('DIV'); |
---|
281 | div.className = 'dhtmlgoodies_aTab'; |
---|
282 | dhtmlgoodies_tabObj[parentId].appendChild(div); |
---|
283 | |
---|
284 | var tabId = initTabs(parentId,Array(tabTitle),0,'','',Array(closeButton),true); |
---|
285 | if(tabContent)div.innerHTML = tabContent; |
---|
286 | if(tabContentUrl){ |
---|
287 | var ajaxIndex = ajaxObjects.length; |
---|
288 | ajaxObjects[ajaxIndex] = new sack(); |
---|
289 | ajaxObjects[ajaxIndex].requestFile = tabContentUrl; // Specifying which file to get |
---|
290 | |
---|
291 | ajaxObjects[ajaxIndex].onCompletion = function(){ showAjaxTabContent(ajaxIndex,parentId,tabId); }; // Specify function that will be executed after file has been found |
---|
292 | ajaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function |
---|
293 | |
---|
294 | } |
---|
295 | |
---|
296 | } |
---|
297 | |
---|
298 | function getTabIndexByTitle(tabTitle) |
---|
299 | { |
---|
300 | var regExp = new RegExp("(.*?) .*$","gi"); |
---|
301 | tabTitle = tabTitle.replace(regExp,'$1'); |
---|
302 | for(var prop in dhtmlgoodies_tabObj){ |
---|
303 | var divs = dhtmlgoodies_tabObj[prop].getElementsByTagName('DIV'); |
---|
304 | for(var no=0;no<divs.length;no++){ |
---|
305 | if(divs[no].id.indexOf('tabTab')>=0){ |
---|
306 | var span = divs[no].getElementsByTagName('SPAN')[0]; |
---|
307 | var regExp2 = new RegExp("(.*?) .*$","gi"); |
---|
308 | var spanTitle = span.innerHTML.replace(regExp2,'$1'); |
---|
309 | |
---|
310 | if(spanTitle == tabTitle){ |
---|
311 | |
---|
312 | var tmpId = divs[no].id.split('_'); |
---|
313 | return Array(prop,tmpId[tmpId.length-1].replace(/[^0-9]/g,'')/1); |
---|
314 | } |
---|
315 | } |
---|
316 | } |
---|
317 | } |
---|
318 | |
---|
319 | return -1; |
---|
320 | |
---|
321 | } |
---|
322 | |
---|
323 | /* Call this function if you want to display some content from external file in one of the tabs |
---|
324 | Arguments: Title of tab and relative path to external file */ |
---|
325 | |
---|
326 | function addAjaxContentToTab(tabTitle,tabContentUrl) |
---|
327 | { |
---|
328 | var index = getTabIndexByTitle(tabTitle); |
---|
329 | if(index!=-1){ |
---|
330 | var ajaxIndex = ajaxObjects.length; |
---|
331 | |
---|
332 | tabId = index[1]; |
---|
333 | parentId = index[0]; |
---|
334 | |
---|
335 | |
---|
336 | ajaxObjects[ajaxIndex] = new sack(); |
---|
337 | ajaxObjects[ajaxIndex].requestFile = tabContentUrl; // Specifying which file to get |
---|
338 | |
---|
339 | ajaxObjects[ajaxIndex].onCompletion = function(){ showAjaxTabContent(ajaxIndex,parentId,tabId); }; // Specify function that will be executed after file has been found |
---|
340 | ajaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function |
---|
341 | |
---|
342 | } |
---|
343 | } |
---|
344 | |
---|
345 | |
---|
346 | |
---|
347 | function deleteTab(tabLabel,tabIndex,parentId) |
---|
348 | { |
---|
349 | |
---|
350 | if(tabLabel){ |
---|
351 | var index = getTabIndexByTitle(tabLabel); |
---|
352 | if(index!=-1){ |
---|
353 | deleteTab(false,index[1],index[0]); |
---|
354 | } |
---|
355 | |
---|
356 | }else if(tabIndex>=0){ |
---|
357 | if(document.getElementById('tabTab' + parentId + '_' + tabIndex)){ |
---|
358 | var obj = document.getElementById('tabTab' + parentId + '_' + tabIndex); |
---|
359 | var id = obj.parentNode.parentNode.id; |
---|
360 | obj.parentNode.removeChild(obj); |
---|
361 | var obj2 = document.getElementById('tabView' + parentId + '_' + tabIndex); |
---|
362 | obj2.parentNode.removeChild(obj2); |
---|
363 | resetTabIds(parentId); |
---|
364 | activeTabIndex[parentId]=-1; |
---|
365 | showTab(parentId,'0'); |
---|
366 | } |
---|
367 | } |
---|
368 | |
---|
369 | |
---|
370 | |
---|
371 | |
---|
372 | |
---|
373 | } |
---|
374 | |
---|
375 | |
---|