home *** CD-ROM | disk | FTP | other *** search
/ Enter 2004 June / ENTER.ISO / files / xampp-win32-1.4.5-installer.exe / xampp / tabpane.js < prev    next >
Encoding:
JavaScript  |  2004-03-24  |  6.9 KB  |  285 lines
  1. /*
  2.  * Tab Pane
  3.  *
  4.  * This script was created by Erik Arvidsson (erik(at)eae.net)
  5.  * for WebFX (http://webfx.eae.net)
  6.  * Copyright 2002
  7.  * 
  8.  * For usage see license at http://webfx.eae.net/license.html    
  9.  *
  10.  * Version: 1.0
  11.  * Created: 2002-01-??    First working version
  12.  * Updated: 2002-02-17    Cleaned up for 1.0 public version
  13.  *
  14.  * Dependencies: *.css - a css file to define the layout
  15.  *
  16.  */
  17.  
  18.  
  19. // This function is used to define if the browser supports the needed
  20. // features
  21. function hasSupport() {
  22.  
  23.     if (typeof hasSupport.support != "undefined")
  24.         return hasSupport.support;
  25.     
  26.     var ie55 = /msie 5\.[56789]/i.test( navigator.userAgent );
  27.     
  28.     hasSupport.support = ( typeof document.implementation != "undefined" &&
  29.             document.implementation.hasFeature( "html", "1.0" ) || ie55 )
  30.             
  31.     // IE55 has a serious DOM1 bug... Patch it!
  32.     if ( ie55 ) {
  33.         document._getElementsByTagName = document.getElementsByTagName;
  34.         document.getElementsByTagName = function ( sTagName ) {
  35.             if ( sTagName == "*" )
  36.                 return document.all;
  37.             else
  38.                 return document._getElementsByTagName( sTagName );
  39.         };
  40.     }
  41.  
  42.     return hasSupport.support;
  43. }
  44.  
  45. ///////////////////////////////////////////////////////////////////////////////////
  46. // The constructor for tab panes
  47. //
  48. // el : HTMLElement        The html element used to represent the tab pane
  49. // bUseCookie : Boolean    Optional. Default is true. Used to determine whether to us
  50. //                        persistance using cookies or not
  51. //
  52. function WebFXTabPane( el, bUseCookie ) {
  53.     if ( !hasSupport() || el == null ) return;
  54.     
  55.     this.element = el;
  56.     this.element.tabPane = this;
  57.     this.pages = [];
  58.     this.selectedIndex = null;
  59.     this.useCookie = bUseCookie != null ? bUseCookie : true;
  60.     
  61.     // add class name tag to class name
  62.     this.element.className = this.classNameTag + " " + this.element.className;
  63.     
  64.     // add tab row
  65.     this.tabRow = document.createElement( "div" );
  66.     this.tabRow.className = "tab-row";
  67.     el.insertBefore( this.tabRow, el.firstChild );
  68.  
  69.     var tabIndex = 0;
  70.     if ( this.useCookie ) {
  71.         tabIndex = Number( WebFXTabPane.getCookie( "webfxtab_" + this.element.id ) );
  72.         if ( isNaN( tabIndex ) )
  73.             tabIndex = 0;
  74.     }
  75.     this.selectedIndex = tabIndex;
  76.     
  77.     // loop through child nodes and add them
  78.     var cs = el.childNodes;
  79.     var n;
  80.     for (var i = 0; i < cs.length; i++) {
  81.         if (cs[i].nodeType == 1 && cs[i].className == "tab-page") {
  82.             this.addTabPage( cs[i] );
  83.         }
  84.     }
  85. }
  86.  
  87. WebFXTabPane.prototype = {
  88.  
  89.     classNameTag:        "dynamic-tab-pane-control",
  90.  
  91.     setSelectedIndex:    function ( n ) {
  92.         if (this.selectedIndex != n) {
  93.             if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null )
  94.                 this.pages[ this.selectedIndex ].hide();
  95.             this.selectedIndex = n;
  96.             this.pages[ this.selectedIndex ].show();
  97.             
  98.             if ( this.useCookie )
  99.                 WebFXTabPane.setCookie( "webfxtab_" + this.element.id, n );    // session cookie
  100.         }
  101.     },
  102.     
  103.     getSelectedIndex:    function () {
  104.         return this.selectedIndex;
  105.     },
  106.     
  107.     addTabPage:    function ( oElement ) {
  108.         if ( !hasSupport() ) return;
  109.         
  110.         if ( oElement.tabPage == this )    // already added
  111.             return oElement.tabPage;
  112.     
  113.         var n = this.pages.length;
  114.         var tp = this.pages[n] = new WebFXTabPage( oElement, this, n );
  115.         tp.tabPane = this;
  116.         
  117.         // move the tab out of the box
  118.         this.tabRow.appendChild( tp.tab );
  119.                 
  120.         if ( n == this.selectedIndex )
  121.             tp.show();
  122.         else
  123.             tp.hide();
  124.             
  125.         return tp;
  126.     }    
  127. };
  128.  
  129. // Cookie handling
  130. WebFXTabPane.setCookie = function ( sName, sValue, nDays ) {
  131.     var expires = "";
  132.     if ( nDays ) {
  133.         var d = new Date();
  134.         d.setTime( d.getTime() + nDays * 24 * 60 * 60 * 1000 );
  135.         expires = "; expires=" + d.toGMTString();
  136.     }
  137.  
  138.     document.cookie = sName + "=" + sValue + expires + "; path=/";
  139. };
  140.  
  141. WebFXTabPane.getCookie = function (sName) {
  142.     var re = new RegExp( "(\;|^)[^;]*(" + sName + ")\=([^;]*)(;|$)" );
  143.     var res = re.exec( document.cookie );
  144.     return res != null ? res[3] : null;
  145. };
  146.  
  147. WebFXTabPane.removeCookie = function ( name ) {
  148.     setCookie( name, "", -1 );
  149. };
  150.  
  151.  
  152.  
  153.  
  154.  
  155.  
  156.  
  157.  
  158. ///////////////////////////////////////////////////////////////////////////////////
  159. // The constructor for tab pages. This one should not be used.
  160. // Use WebFXTabPage.addTabPage instead
  161. //
  162. // el : HTMLElement            The html element used to represent the tab pane
  163. // tabPane : WebFXTabPane    The parent tab pane
  164. // nindex :    Number            The index of the page in the parent pane page array
  165. //
  166. function WebFXTabPage( el, tabPane, nIndex ) {
  167.     if ( !hasSupport() || el == null ) return;
  168.     
  169.     this.element = el;
  170.     this.element.tabPage = this;
  171.     this.index = nIndex;
  172.     
  173.     var cs = el.childNodes;
  174.     for (var i = 0; i < cs.length; i++) {
  175.         if (cs[i].nodeType == 1 && cs[i].className == "tab") {
  176.             this.tab = cs[i];
  177.             break;
  178.         }
  179.     }
  180.     
  181.     // insert a tag around content to support keyboard navigation
  182.     var a = document.createElement( "A" );
  183.     a.href = "javascript:void 0;";
  184.     while ( this.tab.hasChildNodes() )
  185.         a.appendChild( this.tab.firstChild );
  186.     this.tab.appendChild( a );
  187.     
  188.     // hook up events, using DOM0
  189.     var oThis = this;
  190.     this.tab.onclick = function () { oThis.select(); };
  191.     this.tab.onmouseover = function () { WebFXTabPage.tabOver( oThis ); };
  192.     this.tab.onmouseout = function () { WebFXTabPage.tabOut( oThis ); };
  193. }
  194.  
  195. WebFXTabPage.prototype = {
  196.     show:    function () {
  197.         var el = this.tab;
  198.         var s = el.className + " selected";
  199.         s = s.replace(/ +/g, " ");
  200.         el.className = s;
  201.         
  202.         this.element.style.display = "block";
  203.     },
  204.  
  205.     hide:    function () {
  206.         var el = this.tab;
  207.         var s = el.className;
  208.         s = s.replace(/ selected/g, "");
  209.         el.className = s;
  210.  
  211.         this.element.style.display = "none";
  212.     },
  213.     
  214.     select:    function () {
  215.         this.tabPane.setSelectedIndex( this.index );
  216.     }
  217. };
  218.  
  219. WebFXTabPage.tabOver = function ( tabpage ) {
  220.     var el = tabpage.tab;
  221.     var s = el.className + " hover";
  222.     s = s.replace(/ +/g, " ");
  223.     el.className = s;
  224. };
  225.  
  226. WebFXTabPage.tabOut = function ( tabpage ) {
  227.     var el = tabpage.tab;
  228.     var s = el.className;
  229.     s = s.replace(/ hover/g, "");
  230.     el.className = s;
  231. };
  232.  
  233.  
  234. // This function initializes all uninitialized tab panes and tab pages
  235. function setupAllTabs() {
  236.     if ( !hasSupport() ) return;
  237.  
  238.     var all = document.getElementsByTagName( "*" );
  239.     var l = all.length;
  240.     var tabPaneRe = /tab\-pane/;
  241.     var tabPageRe = /tab\-page/;
  242.     var cn, el;
  243.     var parentTabPane;
  244.     
  245.     for ( var i = 0; i < l; i++ ) {
  246.         el = all[i]
  247.         cn = el.className;
  248.  
  249.         // no className
  250.         if ( cn == "" ) continue;
  251.         
  252.         // uninitiated tab pane
  253.         if ( tabPaneRe.test( cn ) && !el.tabPane )
  254.             new WebFXTabPane( el );
  255.     
  256.         // unitiated tab page wit a valid tab pane parent
  257.         else if ( tabPageRe.test( cn ) && !el.tabPage &&
  258.                     tabPaneRe.test( el.parentNode.className ) ) {
  259.             el.parentNode.tabPane.addTabPage( el );            
  260.         }
  261.     }
  262. }
  263.  
  264.  
  265. // initialization hook up
  266.  
  267. // DOM2
  268. if ( typeof window.addEventListener != "undefined" )
  269.     window.addEventListener( "load", setupAllTabs, false );
  270.  
  271. // IE 
  272. else if ( typeof window.attachEvent != "undefined" )
  273.     window.attachEvent( "onload", setupAllTabs );
  274.  
  275. else {
  276.     if ( window.onload != null ) {
  277.         var oldOnload = window.onload;
  278.         window.onload = function ( e ) {
  279.             oldOnload( e );
  280.             setupAllTabs();
  281.         };
  282.     }
  283.     else 
  284.         window.onload = setupAllTabs;
  285. }