[Sommaire] [Imprimer]

   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  }