home *** CD-ROM | disk | FTP | other *** search
/ PC Professionell 2005 June / PCpro_2005_06.ISO / files / opensource / xamp / xampp-win32.exe / xampp / tabpane.js < prev    next >
Encoding:
JavaScript  |  2004-03-24  |  7.9 KB  |  308 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 : false;
  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.  
  76.     this.selectedIndex = tabIndex;
  77.     
  78.     // loop through child nodes and add them
  79.     var cs = el.childNodes;
  80.     var n;
  81.     for (var i = 0; i < cs.length; i++) {
  82.         if (cs[i].nodeType == 1 && cs[i].className == "tab-page") {
  83.             this.addTabPage( cs[i] );
  84.         }
  85.     }
  86. }
  87.  
  88. WebFXTabPane.prototype = {
  89.  
  90.     classNameTag:        "dynamic-tab-pane-control",
  91.  
  92.     setSelectedIndex:    function ( n ) {
  93.         if (this.selectedIndex != n) {
  94.             if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null )
  95.                 this.pages[ this.selectedIndex ].hide();
  96.             this.selectedIndex = n;
  97.             this.pages[ this.selectedIndex ].show();
  98.             
  99.             if ( this.useCookie )
  100.                 WebFXTabPane.setCookie( "webfxtab_" + this.element.id, n );    // session cookie
  101.         }
  102.     },
  103.     
  104.     getSelectedIndex:    function () {
  105.         return this.selectedIndex;
  106.     },
  107.     
  108.     addTabPage:    function ( oElement ) {
  109.         if ( !hasSupport() ) return;
  110.         
  111.         if ( oElement.tabPage == this )    // already added
  112.             return oElement.tabPage;
  113.     
  114.         var n = this.pages.length;
  115.         var tp = this.pages[n] = new WebFXTabPage( oElement, this, n );
  116.         tp.tabPane = this;
  117.         
  118.         // move the tab out of the box
  119.         this.tabRow.appendChild( tp.tab );
  120.                 
  121.         if ( n == this.selectedIndex )
  122.             tp.show();
  123.         else
  124.             tp.hide();
  125.             
  126.         return tp;
  127.     }    
  128. };
  129.  
  130. // Cookie handling
  131. WebFXTabPane.setCookie = function ( sName, sValue, nDays ) {
  132.     var expires = "";
  133.     if ( nDays ) {
  134.         var d = new Date();
  135.         d.setTime( d.getTime() + nDays * 24 * 60 * 60 * 1000 );
  136.         expires = "; expires=" + d.toGMTString();
  137.     }
  138.  
  139.     document.cookie = sName + "=" + sValue + expires + "; path=/";
  140. };
  141.  
  142. WebFXTabPane.getCookie = function (sName) {
  143.     var re = new RegExp( "(\;|^)[^;]*(" + sName + ")\=([^;]*)(;|$)" );
  144.     var res = re.exec( document.cookie );
  145.     return res != null ? res[3] : null;
  146. };
  147.  
  148. WebFXTabPane.removeCookie = function ( name ) {
  149.     setCookie( name, "", -1 );
  150. };
  151.  
  152.  
  153.  
  154.  
  155.  
  156.  
  157.  
  158.  
  159. ///////////////////////////////////////////////////////////////////////////////////
  160. // The constructor for tab pages. This one should not be used.
  161. // Use WebFXTabPage.addTabPage instead
  162. //
  163. // el : HTMLElement            The html element used to represent the tab pane
  164. // tabPane : WebFXTabPane    The parent tab pane
  165. // nindex :    Number            The index of the page in the parent pane page array
  166. //
  167. function WebFXTabPage( el, tabPane, nIndex ) {
  168.     if ( !hasSupport() || el == null ) return;
  169.     
  170.     this.element = el;
  171.     this.element.tabPage = this;
  172.     this.index = nIndex;
  173.     
  174.     var cs = el.childNodes;
  175.     for (var i = 0; i < cs.length; i++) {
  176.         if (cs[i].nodeType == 1 && cs[i].className == "tab") {
  177.             this.tab = cs[i];
  178.             break;
  179.         }
  180.     }
  181.  
  182.     // insert a tag around content to support keyboard navigation
  183.     var a = document.createElement( "A" );
  184.     a.href = "javascript:void 0;";
  185.     while ( this.tab.hasChildNodes() )
  186.         a.appendChild( this.tab.firstChild );
  187.     this.tab.appendChild( a );
  188.     
  189.     
  190.     anchor = '';
  191.     if ( document.URL.indexOf( '#' ) != -1 ) {
  192.         anchor = document.URL.substr( document.URL.indexOf( '#' ) + 1);
  193.     }
  194.     j = 0;
  195.     if ( anchor.length > 0 ) {
  196.         finalList = new Array();
  197.         listOfAnchors = el.getElementsByTagName('A');
  198.         for (i=0; i<listOfAnchors.length; i++) {
  199.             if (listOfAnchors[i].name.length) {
  200.                 finalList[j++] = listOfAnchors[i].name;
  201.             }
  202.         }
  203.         for(i=0; i<finalList.length; i++) {
  204.             if ( anchor == finalList[i] ) {
  205.                 if (tabPane.selectedIndex != nIndex) tabPane.pages[ tabPane.selectedIndex ].hide();
  206.                 tabPane.selectedIndex = nIndex ;
  207.             }
  208.         }
  209.     }
  210.     
  211.     // hook up events, using DOM0
  212.     var oThis = this;
  213.     this.tab.onclick = function () { oThis.select(); };
  214.     this.tab.onmouseover = function () { WebFXTabPage.tabOver( oThis ); };
  215.     this.tab.onmouseout = function () { WebFXTabPage.tabOut( oThis ); };
  216. }
  217.  
  218. WebFXTabPage.prototype = {
  219.     show:    function () {
  220.         var el = this.tab;
  221.         var s = el.className + " selected";
  222.         s = s.replace(/ +/g, " ");
  223.         el.className = s;
  224.         
  225.         this.element.style.display = "block";
  226.     },
  227.  
  228.     hide:    function () {
  229.         var el = this.tab;
  230.         var s = el.className;
  231.         s = s.replace(/ selected/g, "");
  232.         el.className = s;
  233.  
  234.         this.element.style.display = "none";
  235.     },
  236.     
  237.     select:    function () {
  238.         this.tabPane.setSelectedIndex( this.index );
  239.     }
  240. };
  241.  
  242. WebFXTabPage.tabOver = function ( tabpage ) {
  243.     var el = tabpage.tab;
  244.     var s = el.className + " hover";
  245.     s = s.replace(/ +/g, " ");
  246.     el.className = s;
  247. };
  248.  
  249. WebFXTabPage.tabOut = function ( tabpage ) {
  250.     var el = tabpage.tab;
  251.     var s = el.className;
  252.     s = s.replace(/ hover/g, "");
  253.     el.className = s;
  254. };
  255.  
  256.  
  257. // This function initializes all uninitialized tab panes and tab pages
  258. function setupAllTabs() {
  259.     if ( !hasSupport() ) return;
  260.  
  261.     var all = document.getElementsByTagName( "*" );
  262.     var l = all.length;
  263.     var tabPaneRe = /tab\-pane/;
  264.     var tabPageRe = /tab\-page/;
  265.     var cn, el;
  266.     var parentTabPane;
  267.     
  268.     for ( var i = 0; i < l; i++ ) {
  269.         el = all[i]
  270.         cn = el.className;
  271.  
  272.         // no className
  273.         if ( cn == "" ) continue;
  274.         
  275.         // uninitiated tab pane
  276.         if ( tabPaneRe.test( cn ) && !el.tabPane )
  277.             new WebFXTabPane( el );
  278.     
  279.         // unitiated tab page wit a valid tab pane parent
  280.         else if ( tabPageRe.test( cn ) && !el.tabPage &&
  281.                     tabPaneRe.test( el.parentNode.className ) ) {
  282.             el.parentNode.tabPane.addTabPage( el );            
  283.         }
  284.     }
  285. }
  286.  
  287.  
  288. // initialization hook up
  289.  
  290. // DOM2
  291. if ( typeof window.addEventListener != "undefined" )
  292.     window.addEventListener( "load", setupAllTabs, false );
  293.  
  294. // IE 
  295. else if ( typeof window.attachEvent != "undefined" )
  296.     window.attachEvent( "onload", setupAllTabs );
  297.  
  298. else {
  299.     if ( window.onload != null ) {
  300.         var oldOnload = window.onload;
  301.         window.onload = function ( e ) {
  302.             oldOnload( e );
  303.             setupAllTabs();
  304.         };
  305.     }
  306.     else 
  307.         window.onload = setupAllTabs;
  308. }