[5936] | 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 | |
---|