| [ Index ] |
|
Code source de eGroupWare 1.2.106-2 |
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 /* Mozilla 1.6 has a bug which impossibilitates it to manage DOM contents that are defined in the 26 * original document. So we have to workaround it. 27 */ 28 navigator.userAgent.toLowerCase().match('mozilla.*rv[:]1\.6.*gecko') ? is_moz1_6 = true : is_moz1_6 = false; 29 30 function dTabsManager(params) 31 { 32 this._tabEvents = { show: {}, hide: {}}; 33 this.init(params); 34 } 35 36 dTabsManager.prototype.init = function(params) 37 { 38 /* Attributes definition */ 39 this._Tabs = new Array(); 40 this._Tabs['root'] = null; 41 this._Tabs['tabIndexTR'] = null; 42 this._Tabs['tabIndexTDs'] = new Array(); 43 this._Tabs['contents'] = null; 44 this._Tabs['contentsDIV'] = null; 45 this._selectedIndex = null; 46 47 this._nTabs = params['nTabs'] ? params['nTabs'] : 0; 48 this._maxTabs = params['maxTabs'] ? params['maxTabs'] : 0; 49 50 51 /* Create and insert the container */ 52 var table, tbody, tr, td, style; 53 54 style = document.createElement('link'); 55 style.href = GLOBALS['serverRoot'] + "phpgwapi/js/dTabs/dTabs.css"; 56 style.rel = "stylesheet"; 57 style.type = "text/css"; 58 document.body.appendChild(style); 59 60 this._Tabs['root'] = document.createElement('div'); 61 this._Tabs['root'].id = params['id']; 62 this._Tabs['root'].style.position = 'absolute'; 63 //this._Tabs['root'].style.visibility = 'hidden'; 64 this._Tabs['root'].style.top = '150px'; 65 this._Tabs['root'].style.left = '0px'; 66 this._Tabs['root'].style.width = params['width'] ? params['width'] : 0; 67 68 table = document.createElement('table'); 69 tbody = document.createElement('tbody'); 70 table.style.border = '0px solid black'; 71 table.style.width = '100%'; 72 table.style.height = '100%'; 73 table.cellpadding = '10px'; 74 75 this._Tabs['tabIndexTR'] = document.createElement('tr'); 76 this._Tabs['tabIndexTR'].style.height = '30px'; 77 this._Tabs['tabIndexTR'].className = 'dTabs_tr_index'; 78 //this._Tabs['tabIndexTR'].style.width = '100%'; 79 80 this._Tabs['emptyTab'] = document.createElement('td'); 81 this._Tabs['emptyTab'].className = 'dTabs_noTabs'; 82 this._Tabs['emptyTab'].innerHTML = ' '; 83 this._Tabs['tabIndexTR'].appendChild(this._Tabs['emptyTab']); 84 85 tr = document.createElement('tr'); 86 td = document.createElement('td'); 87 88 tr.style.width = '100%'; 89 tr.style.height = '100%'; 90 91 //this._Tabs['contentsDIV'] = document.createElement('div'); 92 //this._Tabs['contentsDIV'].style.position = 'relative'; 93 this._Tabs['contentsDIV'] = td; 94 95 this._Tabs['root'].appendChild(table); 96 table.appendChild(tbody); 97 tbody.appendChild(this._Tabs['tabIndexTR']); 98 tbody.appendChild(tr); 99 tr.appendChild(td); 100 //td.appendChild(this._Tabs['contentsDIV']); 101 tr.appendChild(this._Tabs['contentsDIV']); 102 103 this._Tabs['contents'] = new Array(); 104 105 document.body.appendChild(this._Tabs['root']); 106 } 107 108 /* 109 @method addTab 110 @abstract Inserts a tab 111 */ 112 dTabsManager.prototype.addTab = function (params) 113 { 114 if (typeof(params) != 'object') 115 { 116 return false; 117 } 118 119 if (!params['id'] || !Element(params['id']) || 120 Element(params['id']).tagName.toLowerCase() != 'div' || 121 Element(params['id']).style.position.toLowerCase() != 'absolute') 122 { 123 return false; 124 } 125 126 if (this._Tabs['contents'][params['id']]) 127 { 128 this.replaceTab(params); 129 return; 130 } 131 132 //var contents, tdIndex; 133 var element = Element(params['id']); 134 135 if (is_moz1_6) 136 {/* 137 var element_ = element; 138 element = element.cloneNode(true); 139 //element_.parentNode.replaceChild(element, element_); 140 element_.id = element_.id+'CLONED'; 141 element_.style.display = 'none';*/ 142 element.style.position = 'absolute'; 143 } 144 else 145 { 146 element.parentNode.removeChild(element); 147 } 148 element.style.top = parseInt(this._Tabs['tabIndexTR'].style.height) + 5 + 'px'; 149 element.style.left = this._Tabs['root'].style.left; 150 element.style.zIndex = '-1'; 151 152 this._Tabs['contents'][params['id']] = element; 153 154 this._Tabs.tabIndexTDs[params['id']] = document.createElement('td'); 155 156 var _this = this; 157 this._Tabs.tabIndexTDs[params['id']].innerHTML = ' '+(params['name'] ? params['name'] : 'undefined')+' '; 158 this._Tabs.tabIndexTDs[params['id']].selectedClassName = 'dTabs_selected'; 159 this._Tabs.tabIndexTDs[params['id']].unselectedClassName = 'dTabs_unselected'; 160 this._Tabs.tabIndexTDs[params['id']].className = 'dTabs_unselected'; 161 this._Tabs.tabIndexTDs[params['id']].onclick = function() {_this._showTab(params['id']);}; 162 163 /* Old Version 164 this._Tabs.tabIndexTDs[params['id']].innerHTML = params['name'] ? params['name'] : 'undefined'; 165 this._Tabs.tabIndexTDs[params['id']].selectedClassName = params['selectedClass']; 166 this._Tabs.tabIndexTDs[params['id']].unselectedClassName = params['unselectedClass']; 167 this._Tabs.tabIndexTDs[params['id']].className = params['unselectedClass']; 168 this._Tabs.tabIndexTDs[params['id']].onclick = function() {_this._showTab(params['id']);}; 169 */ 170 171 this._Tabs.tabIndexTR.removeChild(this._Tabs['emptyTab']); 172 this._Tabs.tabIndexTR.appendChild(this._Tabs.tabIndexTDs[params['id']]); 173 this._Tabs.tabIndexTR.appendChild(this._Tabs['emptyTab']); 174 175 if (!is_moz1_6) 176 { 177 this._Tabs.contentsDIV.appendChild(this._Tabs['contents'][params['id']]); 178 } 179 180 this._nTabs++; 181 182 if (this._nTabs == 1) 183 { 184 this._showTab(params['id']); 185 } 186 187 return; 188 } 189 190 dTabsManager.prototype.removeTab = function (id) 191 { 192 if (!this._Tabs.contents[params['id']]) 193 { 194 return false; 195 } 196 197 this._Tabs.tabIndexTR.removeChild(this._Tabs.tabIndexTDs[params['id']]); 198 this._Tabs.contentsDIV.removeChild(this._Tabs.contents[params['id']]); 199 this._Tabs.contents[params['id']] = null; 200 this._Tabs.tabIndexTDs[params['id']] = null; 201 202 return true; 203 } 204 205 dTabsManager.prototype.getTabObject = function() 206 { 207 return this._Tabs.root; 208 } 209 210 dTabsManager.prototype.enableTab = function(id) 211 { 212 if (this._Tabs.contents[id]) 213 { 214 var _this = this; 215 this._Tabs.tabIndexTDs[id].className = 'dTabs_unselected'; 216 this._Tabs.tabIndexTDs[id].onclick = function() {_this._showTab(id);}; 217 } 218 } 219 220 dTabsManager.prototype.disableTab = function(id) 221 { 222 if (this._Tabs.contents[id]) 223 { 224 this._Tabs.tabIndexTDs[id].className = 'dTabs_disabled'; 225 this._Tabs.tabIndexTDs[id].onclick = false; 226 } 227 } 228 229 /****************************************************************************\ 230 * Private Methods * 231 \****************************************************************************/ 232 233 dTabsManager.prototype._showTab = function (id) 234 { 235 if (!this._Tabs.contents[id]) 236 { 237 return false; 238 } 239 240 /* Ajust the tabIndexTR width to be the same as the contents width*/ 241 if (this._Tabs.contents[id].style.width) 242 { 243 this._Tabs['root'].style.width = this._Tabs.contents[id].style.width; 244 this._Tabs['root'].style.height = this._Tabs.contents[id].style.height; 245 } 246 /* 247 else 248 { 249 this._Tabs['root'].style.width = '0px'; 250 }*/ 251 252 this._Tabs.tabIndexTDs[id].className = this._Tabs.tabIndexTDs[id].selectedClassName; 253 254 for (var i in this._Tabs.contents) 255 { 256 if (i == 'length') 257 { 258 continue; 259 } 260 261 //viniciuscb: mystery 262 if (this._Tabs.contents[i].style != null) 263 { 264 this._Tabs.contents[i].style.visibility = 'hidden'; 265 this._Tabs.contents[i].style.display = 'none'; 266 this._Tabs.contents[i].style.zIndex = '-1'; 267 if (this._tabEvents['hide'][i]) this._tabEvents['hide'][i](); 268 } 269 } 270 271 this._Tabs.contents[id].style.visibility = 'visible'; 272 this._Tabs.contents[id].style.display = ''; 273 this._Tabs.contents[id].style.zIndex = '10'; 274 if (this._tabEvents['show'][id]) this._tabEvents['show'][id](); 275 276 if (this._selectedIndex && this._selectedIndex != id) 277 { 278 this._Tabs.tabIndexTDs[this._selectedIndex].className = this._Tabs.tabIndexTDs[this._selectedIndex].unselectedClassName; 279 this._focus(this._Tabs.contents[id]); 280 } 281 282 this._selectedIndex = id; 283 } 284 285 dTabsManager.prototype._focus = function(obj) 286 { 287 for (var i in obj.childNodes) 288 { 289 if (obj.childNodes[i].focus) 290 { 291 obj.childNodes[i].focus(); 292 return true; 293 } 294 else 295 { 296 if (this._focus(obj.childNodes[i])) 297 { 298 return true; 299 } 300 } 301 } 302 }
titre
Description
Corps
titre
Description
Corps
titre
Description
Corps
titre
Corps
| Généré le : Sun Feb 25 17:20:01 2007 | par Balluche grâce à PHPXref 0.7 |