Annotation of /mambo/branches/4.6/includes/js/tabs/tabpane.js
Parent Directory
| 
Revision Log
Revision 3 - (view) (download) (as text)
| 1 : | root | 1 | /*----------------------------------------------------------------------------\ |
| 2 : | | Tab Pane 1.02 | | ||
| 3 : | |-----------------------------------------------------------------------------| | ||
| 4 : | | Created by Erik Arvidsson | | ||
| 5 : | | (http://webfx.eae.net/contact.html#erik) | | ||
| 6 : | | For WebFX (http://webfx.eae.net/) | | ||
| 7 : | |-----------------------------------------------------------------------------| | ||
| 8 : | | Copyright (c) 1998 - 2003 Erik Arvidsson | | ||
| 9 : | |-----------------------------------------------------------------------------| | ||
| 10 : | | This software is provided "as is", without warranty of any kind, express or | | ||
| 11 : | | implied, including but not limited to the warranties of merchantability, | | ||
| 12 : | | fitness for a particular purpose and noninfringement. In no event shall the | | ||
| 13 : | | authors or copyright holders be liable for any claim, damages or other | | ||
| 14 : | | liability, whether in an action of contract, tort or otherwise, arising | | ||
| 15 : | | from, out of or in connection with the software or the use or other | | ||
| 16 : | | dealings in the software. | | ||
| 17 : | | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | | ||
| 18 : | | This software is available under the three different licenses mentioned | | ||
| 19 : | | below. To use this software you must chose, and qualify, for one of those. | | ||
| 20 : | | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | | ||
| 21 : | | The WebFX Non-Commercial License http://webfx.eae.net/license.html | | ||
| 22 : | | Permits anyone the right to use the software in a non-commercial context | | ||
| 23 : | | free of charge. | | ||
| 24 : | | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | | ||
| 25 : | | The WebFX Commercial license http://webfx.eae.net/commercial.html | | ||
| 26 : | | Permits the license holder the right to use the software in a commercial | | ||
| 27 : | | context. Such license must be specifically obtained, however it's valid for | | ||
| 28 : | | any number of implementations of the licensed software. | | ||
| 29 : | | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | | ||
| 30 : | | GPL - The GNU General Public License http://www.gnu.org/licenses/gpl.txt | | ||
| 31 : | | Permits anyone the right to use and modify the software without limitations | | ||
| 32 : | | as long as proper credits are given and the original and modified source | | ||
| 33 : | | code are included. Requires that the final product, software derivate from | | ||
| 34 : | | the original source or any software utilizing a GPL component, such as | | ||
| 35 : | | this, is also licensed under the GPL license. | | ||
| 36 : | |-----------------------------------------------------------------------------| | ||
| 37 : | | 2002-01-?? | First working version | | ||
| 38 : | | 2002-02-17 | Cleaned up for 1.0 public version | | ||
| 39 : | | 2003-02-18 | Changed from javascript uri for anchors to return false | | ||
| 40 : | | 2003-03-03 | Added dispose methods to release IE memory | | ||
| 41 : | |-----------------------------------------------------------------------------| | ||
| 42 : | | Dependencies: *.css a css file to define the layout | | ||
| 43 : | |-----------------------------------------------------------------------------| | ||
| 44 : | | Created 2002-01-?? | All changes are in the log above. | Updated 2003-03-03 | | ||
| 45 : | \----------------------------------------------------------------------------*/ | ||
| 46 : | |||
| 47 : | // This function is used to define if the browser supports the needed | ||
| 48 : | // features | ||
| 49 : | function hasSupport() { | ||
| 50 : | |||
| 51 : | if (typeof hasSupport.support != "undefined") | ||
| 52 : | return hasSupport.support; | ||
| 53 : | |||
| 54 : | var ie55 = /msie 5\.[56789]/i.test( navigator.userAgent ); | ||
| 55 : | |||
| 56 : | hasSupport.support = ( typeof document.implementation != "undefined" && | ||
| 57 : | document.implementation.hasFeature( "html", "1.0" ) || ie55 ) | ||
| 58 : | |||
| 59 : | // IE55 has a serious DOM1 bug... Patch it! | ||
| 60 : | if ( ie55 ) { | ||
| 61 : | document._getElementsByTagName = document.getElementsByTagName; | ||
| 62 : | document.getElementsByTagName = function ( sTagName ) { | ||
| 63 : | if ( sTagName == "*" ) | ||
| 64 : | return document.all; | ||
| 65 : | else | ||
| 66 : | return document._getElementsByTagName( sTagName ); | ||
| 67 : | }; | ||
| 68 : | } | ||
| 69 : | |||
| 70 : | return hasSupport.support; | ||
| 71 : | } | ||
| 72 : | |||
| 73 : | /////////////////////////////////////////////////////////////////////////////////// | ||
| 74 : | // The constructor for tab panes | ||
| 75 : | // | ||
| 76 : | // el : HTMLElement The html element used to represent the tab pane | ||
| 77 : | // bUseCookie : Boolean Optional. Default is true. Used to determine whether to us | ||
| 78 : | // persistance using cookies or not | ||
| 79 : | // | ||
| 80 : | function WebFXTabPane( el, bUseCookie ) { | ||
| 81 : | if ( !hasSupport() || el == null ) return; | ||
| 82 : | |||
| 83 : | this.element = el; | ||
| 84 : | this.element.tabPane = this; | ||
| 85 : | this.pages = []; | ||
| 86 : | this.selectedIndex = null; | ||
| 87 : | this.useCookie = bUseCookie != null ? bUseCookie : true; | ||
| 88 : | |||
| 89 : | // add class name tag to class name | ||
| 90 : | this.element.className = this.classNameTag + " " + this.element.className; | ||
| 91 : | |||
| 92 : | // add tab row | ||
| 93 : | this.tabRow = document.createElement( "div" ); | ||
| 94 : | this.tabRow.className = "tab-row"; | ||
| 95 : | el.insertBefore( this.tabRow, el.firstChild ); | ||
| 96 : | |||
| 97 : | var tabIndex = 0; | ||
| 98 : | if ( this.useCookie ) { | ||
| 99 : | tabIndex = Number( WebFXTabPane.getCookie( "webfxtab_" + this.element.id ) ); | ||
| 100 : | if ( isNaN( tabIndex ) ) | ||
| 101 : | tabIndex = 0; | ||
| 102 : | } | ||
| 103 : | this.selectedIndex = tabIndex; | ||
| 104 : | |||
| 105 : | // loop through child nodes and add them | ||
| 106 : | var cs = el.childNodes; | ||
| 107 : | var n; | ||
| 108 : | for (var i = 0; i < cs.length; i++) { | ||
| 109 : | if (cs[i].nodeType == 1 && cs[i].className == "tab-page") { | ||
| 110 : | this.addTabPage( cs[i] ); | ||
| 111 : | } | ||
| 112 : | } | ||
| 113 : | } | ||
| 114 : | |||
| 115 : | WebFXTabPane.prototype.classNameTag = "dynamic-tab-pane-control"; | ||
| 116 : | |||
| 117 : | WebFXTabPane.prototype.setSelectedIndex = function ( n ) { | ||
| 118 : | if (this.selectedIndex != n) { | ||
| 119 : | if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null ) | ||
| 120 : | this.pages[ this.selectedIndex ].hide(); | ||
| 121 : | this.selectedIndex = n; | ||
| 122 : | this.pages[ this.selectedIndex ].show(); | ||
| 123 : | |||
| 124 : | if ( this.useCookie ) | ||
| 125 : | WebFXTabPane.setCookie( "webfxtab_" + this.element.id, n ); // session cookie | ||
| 126 : | } | ||
| 127 : | }; | ||
| 128 : | |||
| 129 : | WebFXTabPane.prototype.getSelectedIndex = function () { | ||
| 130 : | return this.selectedIndex; | ||
| 131 : | }; | ||
| 132 : | |||
| 133 : | WebFXTabPane.prototype.addTabPage = function ( oElement ) { | ||
| 134 : | if ( !hasSupport() ) return; | ||
| 135 : | |||
| 136 : | if ( oElement.tabPage == this ) // already added | ||
| 137 : | return oElement.tabPage; | ||
| 138 : | |||
| 139 : | var n = this.pages.length; | ||
| 140 : | var tp = this.pages[n] = new WebFXTabPage( oElement, this, n ); | ||
| 141 : | tp.tabPane = this; | ||
| 142 : | |||
| 143 : | // move the tab out of the box | ||
| 144 : | this.tabRow.appendChild( tp.tab ); | ||
| 145 : | |||
| 146 : | if ( n == this.selectedIndex ) | ||
| 147 : | tp.show(); | ||
| 148 : | else | ||
| 149 : | tp.hide(); | ||
| 150 : | |||
| 151 : | return tp; | ||
| 152 : | }; | ||
| 153 : | |||
| 154 : | WebFXTabPane.prototype.dispose = function () { | ||
| 155 : | this.element.tabPane = null; | ||
| 156 : | this.element = null; | ||
| 157 : | this.tabRow = null; | ||
| 158 : | |||
| 159 : | for (var i = 0; i < this.pages.length; i++) { | ||
| 160 : | this.pages[i].dispose(); | ||
| 161 : | this.pages[i] = null; | ||
| 162 : | } | ||
| 163 : | this.pages = null; | ||
| 164 : | }; | ||
| 165 : | |||
| 166 : | |||
| 167 : | |||
| 168 : | // Cookie handling | ||
| 169 : | WebFXTabPane.setCookie = function ( sName, sValue, nDays ) { | ||
| 170 : | var expires = ""; | ||
| 171 : | if ( nDays ) { | ||
| 172 : | var d = new Date(); | ||
| 173 : | d.setTime( d.getTime() + nDays * 24 * 60 * 60 * 1000 ); | ||
| 174 : | expires = "; expires=" + d.toGMTString(); | ||
| 175 : | } | ||
| 176 : | |||
| 177 : | document.cookie = sName + "=" + sValue + expires + "; path=/"; | ||
| 178 : | }; | ||
| 179 : | |||
| 180 : | WebFXTabPane.getCookie = function (sName) { | ||
| 181 : | var re = new RegExp( "(\;|^)[^;]*(" + sName + ")\=([^;]*)(;|$)" ); | ||
| 182 : | var res = re.exec( document.cookie ); | ||
| 183 : | return res != null ? res[3] : null; | ||
| 184 : | }; | ||
| 185 : | |||
| 186 : | WebFXTabPane.removeCookie = function ( name ) { | ||
| 187 : | setCookie( name, "", -1 ); | ||
| 188 : | }; | ||
| 189 : | |||
| 190 : | |||
| 191 : | |||
| 192 : | |||
| 193 : | |||
| 194 : | |||
| 195 : | |||
| 196 : | |||
| 197 : | /////////////////////////////////////////////////////////////////////////////////// | ||
| 198 : | // The constructor for tab pages. This one should not be used. | ||
| 199 : | // Use WebFXTabPage.addTabPage instead | ||
| 200 : | // | ||
| 201 : | // el : HTMLElement The html element used to represent the tab pane | ||
| 202 : | // tabPane : WebFXTabPane The parent tab pane | ||
| 203 : | // nindex : Number The index of the page in the parent pane page array | ||
| 204 : | // | ||
| 205 : | function WebFXTabPage( el, tabPane, nIndex ) { | ||
| 206 : | if ( !hasSupport() || el == null ) return; | ||
| 207 : | |||
| 208 : | this.element = el; | ||
| 209 : | this.element.tabPage = this; | ||
| 210 : | this.index = nIndex; | ||
| 211 : | |||
| 212 : | var cs = el.childNodes; | ||
| 213 : | for (var i = 0; i < cs.length; i++) { | ||
| 214 : | if (cs[i].nodeType == 1 && cs[i].className == "tab") { | ||
| 215 : | this.tab = cs[i]; | ||
| 216 : | break; | ||
| 217 : | } | ||
| 218 : | } | ||
| 219 : | |||
| 220 : | // insert a tag around content to support keyboard navigation | ||
| 221 : | |||
| 222 : | |||
| 223 : | var a = document.createElement( "A" ); | ||
| 224 : | this.aElement = a; | ||
| 225 : | a.href = "#"; | ||
| 226 : | a.onclick = function () { return false; }; | ||
| 227 : | while ( this.tab.hasChildNodes() ) | ||
| 228 : | a.appendChild( this.tab.firstChild ); | ||
| 229 : | this.tab.appendChild( a ); | ||
| 230 : | |||
| 231 : | |||
| 232 : | // hook up events, using DOM0 | ||
| 233 : | var oThis = this; | ||
| 234 : | this.tab.onclick = function () { oThis.select(); }; | ||
| 235 : | this.tab.onmouseover = function () { WebFXTabPage.tabOver( oThis ); }; | ||
| 236 : | this.tab.onmouseout = function () { WebFXTabPage.tabOut( oThis ); }; | ||
| 237 : | } | ||
| 238 : | |||
| 239 : | WebFXTabPage.prototype.show = function () { | ||
| 240 : | var el = this.tab; | ||
| 241 : | var s = el.className + " selected"; | ||
| 242 : | s = s.replace(/ +/g, " "); | ||
| 243 : | el.className = s; | ||
| 244 : | |||
| 245 : | this.element.style.display = "block"; | ||
| 246 : | }; | ||
| 247 : | |||
| 248 : | WebFXTabPage.prototype.hide = function () { | ||
| 249 : | var el = this.tab; | ||
| 250 : | var s = el.className; | ||
| 251 : | s = s.replace(/ selected/g, ""); | ||
| 252 : | el.className = s; | ||
| 253 : | |||
| 254 : | this.element.style.display = "none"; | ||
| 255 : | }; | ||
| 256 : | |||
| 257 : | WebFXTabPage.prototype.select = function () { | ||
| 258 : | this.tabPane.setSelectedIndex( this.index ); | ||
| 259 : | }; | ||
| 260 : | |||
| 261 : | WebFXTabPage.prototype.dispose = function () { | ||
| 262 : | this.aElement.onclick = null; | ||
| 263 : | this.aElement = null; | ||
| 264 : | this.element.tabPage = null; | ||
| 265 : | this.tab.onclick = null; | ||
| 266 : | this.tab.onmouseover = null; | ||
| 267 : | this.tab.onmouseout = null; | ||
| 268 : | this.tab = null; | ||
| 269 : | this.tabPane = null; | ||
| 270 : | this.element = null; | ||
| 271 : | }; | ||
| 272 : | |||
| 273 : | WebFXTabPage.tabOver = function ( tabpage ) { | ||
| 274 : | var el = tabpage.tab; | ||
| 275 : | var s = el.className + " hover"; | ||
| 276 : | s = s.replace(/ +/g, " "); | ||
| 277 : | el.className = s; | ||
| 278 : | }; | ||
| 279 : | |||
| 280 : | WebFXTabPage.tabOut = function ( tabpage ) { | ||
| 281 : | var el = tabpage.tab; | ||
| 282 : | var s = el.className; | ||
| 283 : | s = s.replace(/ hover/g, ""); | ||
| 284 : | el.className = s; | ||
| 285 : | }; | ||
| 286 : | |||
| 287 : | |||
| 288 : | // This function initializes all uninitialized tab panes and tab pages | ||
| 289 : | function setupAllTabs() { | ||
| 290 : | if ( !hasSupport() ) return; | ||
| 291 : | |||
| 292 : | var all = document.getElementsByTagName( "*" ); | ||
| 293 : | var l = all.length; | ||
| 294 : | var tabPaneRe = /tab\-pane/; | ||
| 295 : | var tabPageRe = /tab\-page/; | ||
| 296 : | var cn, el; | ||
| 297 : | var parentTabPane; | ||
| 298 : | |||
| 299 : | for ( var i = 0; i < l; i++ ) { | ||
| 300 : | el = all[i] | ||
| 301 : | cn = el.className; | ||
| 302 : | |||
| 303 : | // no className | ||
| 304 : | if ( cn == "" ) continue; | ||
| 305 : | |||
| 306 : | // uninitiated tab pane | ||
| 307 : | if ( tabPaneRe.test( cn ) && !el.tabPane ) | ||
| 308 : | new WebFXTabPane( el ); | ||
| 309 : | |||
| 310 : | // unitiated tab page wit a valid tab pane parent | ||
| 311 : | else if ( tabPageRe.test( cn ) && !el.tabPage && | ||
| 312 : | tabPaneRe.test( el.parentNode.className ) ) { | ||
| 313 : | el.parentNode.tabPane.addTabPage( el ); | ||
| 314 : | } | ||
| 315 : | } | ||
| 316 : | } | ||
| 317 : | |||
| 318 : | function disposeAllTabs() { | ||
| 319 : | if ( !hasSupport() ) return; | ||
| 320 : | |||
| 321 : | var all = document.getElementsByTagName( "*" ); | ||
| 322 : | var l = all.length; | ||
| 323 : | var tabPaneRe = /tab\-pane/; | ||
| 324 : | var cn, el; | ||
| 325 : | var tabPanes = []; | ||
| 326 : | |||
| 327 : | for ( var i = 0; i < l; i++ ) { | ||
| 328 : | el = all[i] | ||
| 329 : | cn = el.className; | ||
| 330 : | |||
| 331 : | // no className | ||
| 332 : | if ( cn == "" ) continue; | ||
| 333 : | |||
| 334 : | // tab pane | ||
| 335 : | if ( tabPaneRe.test( cn ) && el.tabPane ) | ||
| 336 : | tabPanes[tabPanes.length] = el.tabPane; | ||
| 337 : | } | ||
| 338 : | |||
| 339 : | for (var i = tabPanes.length - 1; i >= 0; i--) { | ||
| 340 : | tabPanes[i].dispose(); | ||
| 341 : | tabPanes[i] = null; | ||
| 342 : | } | ||
| 343 : | } | ||
| 344 : | |||
| 345 : | |||
| 346 : | // initialization hook up | ||
| 347 : | |||
| 348 : | // DOM2 | ||
| 349 : | if ( typeof window.addEventListener != "undefined" ) | ||
| 350 : | window.addEventListener( "load", setupAllTabs, false ); | ||
| 351 : | |||
| 352 : | // IE | ||
| 353 : | else if ( typeof window.attachEvent != "undefined" ) { | ||
| 354 : | window.attachEvent( "onload", setupAllTabs ); | ||
| 355 : | window.attachEvent( "onunload", disposeAllTabs ); | ||
| 356 : | } | ||
| 357 : | |||
| 358 : | else { | ||
| 359 : | if ( window.onload != null ) { | ||
| 360 : | var oldOnload = window.onload; | ||
| 361 : | window.onload = function ( e ) { | ||
| 362 : | oldOnload( e ); | ||
| 363 : | setupAllTabs(); | ||
| 364 : | }; | ||
| 365 : | } | ||
| 366 : | else | ||
| 367 : | window.onload = setupAllTabs; | ||
| 368 : | } |
| ViewVC Help | |
| Powered by ViewVC 1.0.0 |
Web Hosting provided by Network Redux.