一个很好用的TabMenu(转)

我这个不知道什么时候从国外网站上淘过来的，很好用，支持W3C，可以用div+css来实现的东东。

点击下载此文件

他的JS如下：

程序代码：

[ 复制代码到剪贴板 ]

function hasSupport() {

    if (typeof hasSupport.support != "undefined")
        return hasSupport.support;
    
    var ie55 = /msie 5\.[56789]/i.test( navigator.userAgent );
    
    hasSupport.support = ( typeof document.implementation != "undefined" &&
            document.implementation.hasFeature( "html", "1.0" ) || ie55 )
            
    // IE55 has a serious DOM1 bug... Patch it!
    if ( ie55 ) {
        document._getElementsByTagName = document.getElementsByTagName;
        document.getElementsByTagName = function ( sTagName ) {
            if ( sTagName == "*" )
                return document.all;
            else
                return document._getElementsByTagName( sTagName );
        };
    }

    return hasSupport.support;
}

///////////////////////////////////////////////////////////////////////////////////
// The constructor for tab panes
//
// el : HTMLElement        The html element used to represent the tab pane
// bUseCookie : Boolean    Optional. Default is true. Used to determine whether to us
//                        persistance using cookies or not
//
function WebFXTabPane( el, bUseCookie ) {
    if ( !hasSupport() || el == null ) return;
    
    this.element = el;
    this.element.tabPane = this;
    this.pages = [];
    this.selectedIndex = null;
    this.useCookie = bUseCookie != null ? bUseCookie : true;
    
    // add class name tag to class name
    this.element.className = this.classNameTag + " " + this.element.className;
    
    // add tab row
    this.tabRow = document.createElement( "div" );
    this.tabRow.className = "tab-row";
    el.insertBefore( this.tabRow, el.firstChild );

    var tabIndex = 0;
    if ( this.useCookie ) {
        tabIndex = Number( WebFXTabPane.getCookie( "webfxtab_" + this.element.id ) );
        if ( isNaN( tabIndex ) )
            tabIndex = 0;
    }
    this.selectedIndex = tabIndex;
    
    // loop through child nodes and add them
    var cs = el.childNodes;
    var n;
    for (var i = 0; i < cs.length; i++) {
        if (cs[i].nodeType == 1 && cs[i].className == "tab-page") {
            this.addTabPage( cs[i] );
        }
    }
}

WebFXTabPane.prototype.classNameTag = "dynamic-tab-pane-control";

WebFXTabPane.prototype.setSelectedIndex = function ( n ) {
    if (this.selectedIndex != n) {
        if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null )
            this.pages[ this.selectedIndex ].hide();
        this.selectedIndex = n;
        this.pages[ this.selectedIndex ].show();
        
        if ( this.useCookie )
            WebFXTabPane.setCookie( "webfxtab_" + this.element.id, n );    // session cookie
    }
};
    
WebFXTabPane.prototype.getSelectedIndex = function () {
    return this.selectedIndex;
};
    
WebFXTabPane.prototype.addTabPage = function ( oElement ) {
    if ( !hasSupport() ) return;
    
    if ( oElement.tabPage == this )    // already added
        return oElement.tabPage;

    var n = this.pages.length;
    var tp = this.pages[n] = new WebFXTabPage( oElement, this, n );
    tp.tabPane = this;
    
    // move the tab out of the box
    this.tabRow.appendChild( tp.tab );
            
    if ( n == this.selectedIndex )
        tp.show();
    else
        tp.hide();
        
    return tp;
};
    
WebFXTabPane.prototype.dispose = function () {
    this.element.tabPane = null;
    this.element = null;        
    this.tabRow = null;
    
    for (var i = 0; i < this.pages.length; i++) {
        this.pages[i].dispose();
        this.pages[i] = null;
    }
    this.pages = null;
};


// Cookie handling
WebFXTabPane.setCookie = function ( sName, sValue, nDays ) {
    var expires = "";
    if ( nDays ) {
        var d = new Date();
        d.setTime( d.getTime() + nDays * 24 * 60 * 60 * 1000 );
        expires = "; expires=" + d.toGMTString();
    }

    document.cookie = sName + "=" + sValue + expires + "; path=/";
};

WebFXTabPane.getCookie = function (sName) {
    var re = new RegExp( "(\;|^)[^;]*(" + sName + ")\=([^;]*)(;|$)" );
    var res = re.exec( document.cookie );
    return res != null ? res[3] : null;
};

WebFXTabPane.removeCookie = function ( name ) {
    setCookie( name, "", -1 );
};


///////////////////////////////////////////////////////////////////////////////////
// The constructor for tab pages. This one should not be used.
// Use WebFXTabPage.addTabPage instead
//
// el : HTMLElement            The html element used to represent the tab pane
// tabPane : WebFXTabPane    The parent tab pane
// nindex :    Number            The index of the page in the parent pane page array
//
function WebFXTabPage( el, tabPane, nIndex ) {
    if ( !hasSupport() || el == null ) return;
    
    this.element = el;
    this.element.tabPage = this;
    this.index = nIndex;
    
    var cs = el.childNodes;
    for (var i = 0; i < cs.length; i++) {
        if (cs[i].nodeType == 1 && cs[i].className == "tab") {
            this.tab = cs[i];
            break;
        }
    }
    
    // insert a tag around content to support keyboard navigation
    
    
    var a = document.createElement( "A" );
    this.aElement = a;
    a.href = "#";
    a.onclick = function () { return false; };
    while ( this.tab.hasChildNodes() )
        a.appendChild( this.tab.firstChild );
    this.tab.appendChild( a );

    
    // hook up events, using DOM0
    var oThis = this;
    this.tab.onclick = function () { oThis.select(); };
    this.tab.onmouseover = function () { WebFXTabPage.tabOver( oThis ); };
    this.tab.onmouseout = function () { WebFXTabPage.tabOut( oThis ); };
}

WebFXTabPage.prototype.show = function () {
    var el = this.tab;
    var s = el.className + " selected";
    s = s.replace(/ +/g, " ");
    el.className = s;
    
    this.element.style.display = "block";
};

WebFXTabPage.prototype.hide = function () {
    var el = this.tab;
    var s = el.className;
    s = s.replace(/ selected/g, "");
    el.className = s;

    this.element.style.display = "none";
};
    
WebFXTabPage.prototype.select = function () {
    this.tabPane.setSelectedIndex( this.index );
};
    
WebFXTabPage.prototype.dispose = function () {
    this.aElement.onclick = null;
    this.aElement = null;
    this.element.tabPage = null;
    this.tab.onclick = null;
    this.tab.onmouseover = null;
    this.tab.onmouseout = null;
    this.tab = null;
    this.tabPane = null;
    this.element = null;
};

WebFXTabPage.tabOver = function ( tabpage ) {
    var el = tabpage.tab;
    var s = el.className + " hover";
    s = s.replace(/ +/g, " ");
    el.className = s;
};

WebFXTabPage.tabOut = function ( tabpage ) {
    var el = tabpage.tab;
    var s = el.className;
    s = s.replace(/ hover/g, "");
    el.className = s;
};


// This function initializes all uninitialized tab panes and tab pages
function setupAllTabs() {
    if ( !hasSupport() ) return;

    var all = document.getElementsByTagName( "*" );
    var l = all.length;
    var tabPaneRe = /tab\-pane/;
    var tabPageRe = /tab\-page/;
    var cn, el;
    var parentTabPane;
    
    for ( var i = 0; i < l; i++ ) {
        el = all[i]
        cn = el.className;

        // no className
        if ( cn == "" ) continue;
        
        // uninitiated tab pane
        if ( tabPaneRe.test( cn ) && !el.tabPane )
            new WebFXTabPane( el );
    
        // unitiated tab page wit a valid tab pane parent
        else if ( tabPageRe.test( cn ) && !el.tabPage &&
                    tabPaneRe.test( el.parentNode.className ) ) {
            el.parentNode.tabPane.addTabPage( el );            
        }
    }
}

function disposeAllTabs() {
    if ( !hasSupport() ) return;
    
    var all = document.getElementsByTagName( "*" );
    var l = all.length;
    var tabPaneRe = /tab\-pane/;
    var cn, el;
    var tabPanes = [];
    
    for ( var i = 0; i < l; i++ ) {
        el = all[i]
        cn = el.className;

        // no className
        if ( cn == "" ) continue;
        
        // tab pane
        if ( tabPaneRe.test( cn ) && el.tabPane )
            tabPanes[tabPanes.length] = el.tabPane;
    }
    
    for (var i = tabPanes.length - 1; i >= 0; i--) {
        tabPanes[i].dispose();
        tabPanes[i] = null;
    }
}


// initialization hook up

// DOM2
if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", setupAllTabs, false );

// IE 
else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", setupAllTabs );
    window.attachEvent( "onunload", disposeAllTabs );
}

else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            setupAllTabs();
        };
    }
    else 
        window.onload = setupAllTabs;
}

他的CSS书写好像不是很符合规则，我这里贴一个出来

程序代码：

[ 复制代码到剪贴板 ]

.dynamic-tab-pane-control.tab-pane {
    position:    relative;
    width:        100%;
}

.dynamic-tab-pane-control .tab-row .tab {
    font:            Menu;
    cursor:            Default;
    display:        inline;
    margin:            1px -1px 1px 2px;
    float:            left;
    padding:        2px 5px 3px 5px;
    background:        ActiveBorder;
    border:            0;/* 1px solid; */
    border-color:    ThreeDHighlight ThreeDDarkShadow
                    ThreeDDarkShadow ThreeDHighlight;
    border-bottom:    0;
    z-index:        1;
    white-space:    nowrap;
    position:        relative;
    top:            0;
}

.dynamic-tab-pane-control .tab-row .tab.selected {
    background:        ThreeDHighlight !important;
    border:            1px solid ThreeDDarkShadow;
    border-bottom:    0;
    z-index:        3;
    padding:        2px 6px 4px 6px;
    margin:            1px -3px -3px 0px;
    top:            -2px;
}

.dynamic-tab-pane-control .tab-row .tab a {
    font:                Menu;
    color:                WindowText;
    text-decoration:    none;
    cursor:                default;
}

.dynamic-tab-pane-control .tab-row .tab.hover {
    background:    Highlight;
}

.dynamic-tab-pane-control .tab-page {
    clear:            both;
    border:            1px solid ThreeDDarkShadow;
    background:        ThreeDHighlight;
    z-index:        2;
    position:        relative;
    top:            -2px;
    color:            WindowText;
    font:            Message-Box;
    padding:        10px;
    
    height:            200px;
}

.dynamic-tab-pane-control .tab-row {
    z-index:        1;
    white-space:    nowrap;
}

最后是一个demo.html

程序代码：

[ 复制代码到剪贴板 ]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Tab Pane Demo (WebFX)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="local/webfxlayout.js"></script>

<!-- this link element includes the css definitions that describes the tab pane -->
<!--
<link type="text/css" rel="stylesheet" href="tab.winclassic.css" />
-->
<link id="luna-tab-style-sheet" type="text/css" rel="stylesheet" href="css/luna/tab.css" disabled="disabled" />
<link id="webfx-tab-style-sheet" type="text/css" rel="stylesheet" href="css/tab.webfx.css" disabled="disabled" />
<link id="winclassic-tab-style-sheet" type="text/css" rel="stylesheet" href="css/tab.winclassic.css"  disabled="disabled" />
<!-- the id is not needed. It is used here to be able to change css file at runtime -->

<style type="text/css">

.dynamic-tab-pane-control .tab-page {
    height:        200px;
}

.dynamic-tab-pane-control .tab-page .dynamic-tab-pane-control .tab-page {
    height:        100px;
}

html, body {
    background:    ThreeDFace;
}

form {
    margin:        0;
    padding:    0;
}

/* over ride styles from webfxlayout */

body {
    margin:        10px;
    width:        auto;
    height:        auto;
}

.dynamic-tab-pane-control h2 {
    text-align:    center;
    width:        auto;
}

.dynamic-tab-pane-control h2 a {
    display:    inline;
    width:        auto;
}

.dynamic-tab-pane-control a:hover {
    background: transparent;
}


</style>
<script type="text/javascript" src="js/tabpane.js"></script>
</head>
<body>

<script type="text/javascript">
//<![CDATA[

function setLinkSrc( sStyle ) {
    document.getElementById( "luna-tab-style-sheet" ).disabled = sStyle != "luna";
    document.getElementById( "webfx-tab-style-sheet" ).disabled = sStyle != "webfx"
    document.getElementById( "winclassic-tab-style-sheet" ).disabled = sStyle != "winclassic"
    
    document.documentElement.style.background = 
    document.body.style.background = sStyle == "webfx" ? "white" : "ThreeDFace";    
}

setLinkSrc( "luna" );

//]]>
</script>

<form action="#">
<fieldset>
    <legend>Select Style Sheet</legend>

<input id="luna-radio" type="radio" name="tab-css-radio" checked="checked"
    value="css/luna/tab.css" onclick="setLinkSrc('luna')"/>
<label for="luna-radio">luna/tab.css</label>
<br />

<input id="webfx-radio" type="radio" name="tab-css-radio" value="css/tab.webfx.css"
     onclick="setLinkSrc('webfx')" />
<label for="webfx-radio">tab.webfx.css</label>
<br />

<input id="classic-radio" type="radio" name="tab-css-radio"
    value="css/tab.winclassic.css" onclick="setLinkSrc('winclassic')"/>
<label for="classic-radio">tab.winclassic.css</label>

</fieldset>
</form>

<p>&nbsp;</p>

<div class="tab-pane" id="tabPane1">

<script type="text/javascript">
tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ) );
//tp1.setClassNameTag( "dynamic-tab-pane-control-luna" );
//al&#101;rt( 0 )
</script>

    <div class="tab-page" id="tabPage1">
        <h2 class="tab">General</h2>
        
        <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</script>
        
        This is text of tab 1. This is text of tab 1. This is text of tab 1. 
        This is text of tab 1. This is text of tab 1. This is text of tab 1. 
        This is text of tab 1. This is text of tab 1. This is text of tab 1.
        
    </div>

    <div class="tab-page" id="tabPage2">
        <h2 class="tab">Security</h2>
        
        <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage2" ) );</script>
        
        This is text of tab 2. This is text of tab 2. This is text of tab 2. 
        This is text of tab 2. This is text of tab 2. This is text of tab 2. 
        This is text of tab 2. This is text of tab 2. This is text of tab 2.
        <br />
        <br />
        This is text of tab 2. This is text of tab 2. This is text of tab 2. 
        This is text of tab 2. This is text of tab 2. This is text of tab 2. 
        This is text of tab 2. This is text of tab 2. This is text of tab 2.
        
    </div>

    <div class="tab-page" id="tabPage3">
        <h2 class="tab">Privacy</h2>
        
        <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage3" ) );</script>
        
        This is text of tab 3. This is text of tab 3. This is text of tab 3. 
        This is text of tab 3. This is text of tab 3. This is text of tab 3. 
        This is text of tab 3. This is text of tab 3. This is text of tab 3.
        
    </div>

    <div class="tab-page" id="tabPage4">
        <h2 class="tab">Content</h2>
        
        <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage4" ) );</script>
        
        <fieldset>
            <legend>Content</legend>
            This is text of tab 4. This is text of tab 4. This is text of tab 4. 
            This is text of tab 4. This is text of tab 4. This is text of tab 4. 
            This is text of tab 4. This is text of tab 4. This is text of tab 4.
        </fieldset>
        
    </div>

</div>


<p>Another tab below</p>


<!-- id is not necessary unless you want to support multiple tabs with persistence -->
<div class="tab-pane" id="tabPane2">

    <div class="tab-page">
        <h2 class="tab">General</h2>
        
        This is text of tab 1. This is text of tab 1. This is text of tab 1. 
        This is text of tab 1. This is text of tab 1. This is text of tab 1. 
        This is text of tab 1. This is text of tab 1. This is text of tab 1.
        
    </div>

    <div class="tab-page">
        <h2 class="tab">Security</h2>
        
        This is text of tab 2. This is text of tab 2. This is text of tab 2. 
        This is text of tab 2. This is text of tab 2. This is text of tab 2. 
        This is text of tab 2. This is text of tab 2. This is text of tab 2.
        <br />
        <br />
        This is text of tab 2. This is text of tab 2. This is text of tab 2. 
        This is text of tab 2. This is text of tab 2. This is text of tab 2. 
        This is text of tab 2. This is text of tab 2. This is text of tab 2.
        
    </div>

    <div class="tab-page">
        <h2 class="tab">Nested</h2>
        
        <!-- id is not necessary unless you want to support multiple tabs with persistence -->
        <div class="tab-pane" id="tabPane3">

            <div class="tab-page">
                <h2 class="tab">General</h2>
                
                This is text of tab 1. This is text of tab 1. This is text of tab 1. 
                This is text of tab 1. This is text of tab 1. This is text of tab 1. 
                This is text of tab 1. This is text of tab 1. This is text of tab 1.
                
            </div>

            <div class="tab-page">
                <h2 class="tab">Privacy</h2>
                
                This is text of tab 2. This is text of tab 2. This is text of tab 2. 
                This is text of tab 2. This is text of tab 2. This is text of tab 2. 
                This is text of tab 2. This is text of tab 2. This is text of tab 2.
                
            </div>

        </div>
        
    </div>

</div>


<script type="text/javascript">
//<![CDATA[

setupAllTabs();

//]]>
</script>

</body>
</html>

最后，还是打包给大家下载吧，好东西大家一起分享与研究