[6779] | 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 | } |
---|