刚刚看了一个XD写的TAB页,顺便发一个我写的

micrexp

浏览: 12281 次
来自: ...

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (5)

社区版块

存档分类

2007-05 ( 5)
更多存档...

CSS XHTML HTML

顺便贴一个我写的

代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" >  
<head>  
    <title>Untitled Page</title>  
    <link type="text/css" href="gridstyle.css" rel="StyleSheet"/>  
    <script language="javascript" type="text/javascript">  
        var HK_TabItem = function(){   
            this.tabControl = null;   
            var button = document.createElement("div");              
            var items = new Array();   
            var active = false;   
            this.appendItem = function(value){   
                items[items.length] = value;   
                valuevalue.oldVisible = value.style.display;   
                value.style.display = "none";   
            }   
            this.getElement = function(){   
                return button;   
            }   
            this.setCaption = function(value){   
                button.innerText = value;   
            }   
            this.setActive = function(){   
                if(active){return};   
                button.className = "tab_tabbuttonactive";   
                this.tabControl.setActiveTab(this);   
                for(var i=0;i<items.length;i++){   
                    items[i].style.display = items[i].oldVisible;   
                }   
                active = true;   
            }   
            this.deActive = function(){   
                button.className = "tab_tabbutton";   
                for(var i=0;i<items.length;i++){   
                    items[i].style.display = "none";   
                }   
                active = false;   
            }   
            function onClick(){   
                button.tab.setActive();   
            }   
            button.attachEvent("onclick",onClick);   
            button.className = "tab_tabbutton";   
            button.tab = this;   
        }   
        var HK_TabControl = function(){   
            var activeTab = null;   
            var banner =document.createElement("div");   
            var head = document.createElement("div");   
            var line = document.createElement("div");   
            var tab = document.createElement("div");   
            var padding = document.createElement("div");   
            banner.className = "tab_banner";   
            head.className = "tab_head";   
            line.className = "tab_line";   
            padding.className = "tab_padding";   
            line.innerHTML = " ";   
            tab.appendChild(banner);   
            tab.appendChild(line);   
            banner.appendChild(head);               
            this.tabs = new Array();   
            this.setActiveTab = function(value){   
                if(activeTab!=null){   
                    activeTab.deActive();   
                }                
                activeTab = value;      
            }   
            this.getActiveTab = function(){   
                return activeTab;   
            }   
            this.appendTab = function(){   
                var tab = new HK_TabItem();   
                banner.appendChild(tab.getElement());   
                tab.tabControl = this;   
                return tab;   
            }   
            this.parent = null;     
            this.init = function(){   
                this.parent.appendChild(tab);   
                banner.appendChild(padding);   
                padding.style.pixelWidth = banner.offsetWidth - padding.offsetLeft-2;   
            }             
        }   
    </script>  
</head>  
<body>  
<div id="test"></div>  
    <div id="test1" style="width: 100px; height: 100px">  
        <input id="Button1" type="button" value="button" />  
        asdfasdf</div>  
    <div id="test2" style="width: 100px; height: 100px">  
        asdfasdf<input id="Text1" type="text" /></div>  
    <div id="test3" style="width: 100px; height: 100px">  
        <input id="Checkbox1" type="checkbox" />asdfasdf</div>  
    <div id="test4" style="width: 100px; height: 100px">  
        asdfasdf<input id="Hidden1" type="hidden" /></div>  
        <script>  
            var tabcontrol = new HK_TabControl();   
            var tab = tabcontrol.appendTab();       
            tab.setCaption("test1");   
            tab.appendItem(document.getElementById("test1"));                     
            var tab = tabcontrol.appendTab();       
            tab.setCaption("test2");   
            tab.appendItem(document.getElementById("test2"));        
            var tab = tabcontrol.appendTab();       
            tab.setCaption("test3");   
            tab.appendItem(document.getElementById("test3"));        
            var tab = tabcontrol.appendTab();       
            tab.setCaption("test4");   
            tab.appendItem(document.getElementById("test4"));        
            tab.setActive();               
            tabcontrol.parent = document.getElementById("test");   
            tabcontrol.init();   
        </script>  
  
</body>  
</html>  
  
css:   
  
tab_tabbuttonactive   
{   
    cursor:hand;   
    text-align:center;   
    vertical-align:middle;   
    background-color: #cde6f8;   
    border-width:1px;   
    border-top:solid 1px #336699;   
    border-left:solid 1px #336699;   
    border-right:solid 1px #336699;   
    display:inline;   
    float:left;     
    height:26px;   
    width:80px;   
    text-align:center;   
    vertical-align:middle;   
    line-height:2;   
}   
.tab_padding   
{   
    cursor:hand;   
    text-align:center;   
    vertical-align:middle;   
    border-bottom:solid 1px #336699;    
    border-width:1px;   
    background-color: #98b1c4;    
    display:inline;   
    float:left;     
    height:27px;   
}   
.tab_tabbutton   
{   
    cursor:hand;   
    text-align:center;   
    vertical-align:middle;   
    border-bottom:solid 1px #336699;    
    border-width:1px;   
    background-color: #98b1c4;    
    display:inline;   
    float:left;     
    height:26px;   
    width:80px;   
    text-align:center;   
    vertical-align:middle;   
    line-height:2;   
}   
.tab_banner   
{   
    cursor:hand;   
    text-align:center;   
    vertical-align:middle;   
    background-color: #98b1c4;    
    height:27px;     
}   
.tab_head   
{   
    cursor:hand;   
    text-align:center;   
    vertical-align:middle;   
    border-bottom:solid 1px #336699;    
    border-width:1px;   
    background-color: #98b1c4;    
    display:inline;   
    float:left;     
    width:12px;   
    height:27px;   
}   
.tab_line   
{   
    background-color:#cde6f8;   
    line-height: 6px;   
}

[img ][/img]