Oo缘来是你oO

物有本末、事有终始，知所先后，则近道矣

用户操作

[留言] [发消息] [加为好友]

订阅我的博客

[编辑]majianan的公告

-------------------------------<br /> <div align="left"> <p><font color="blue">Oo缘来是你oO </font>博客空间内所有文章除特别声明为 <font color="blue">（转载）</font>，均为作者的学习心得和原创作品。如要转载，请注明作者名<font color="blue">马嘉楠</font> 及 <font color="blue">原文地址</font>，谢谢！</p> </div> -------------------------------<br /> <h5>联系方式</h5> <br /> <div style="margin-top: 10px"> <img title="52524611@QQ.com" alt="" src="http://services.nexodyne.com/email/icon/gXHQZkzx3%2Bs%3D/GOQS5f0%3D/UVE%3D/0/image.png" border="0" /> <img title="jianan.ma@gmail" alt="" src="http://services.nexodyne.com/email/icon/eNxng175bNPI/Yf4fwHs%3D/R01haWw%3D/0/image.png" border="0" /> <img title="majianan_1983@hotmail.com" alt="" src="http://services.nexodyne.com/email/icon/1MYph7lFzJmppOeMsg%3D%3D/WNTDl6Y%3D/SG90bWFpbA%3D%3D/0/image.png" border="0" /> </div> <br /> <br /> -------------------------------<br /> <script src="http://s68.cnzz.com/stat.php?id=1194936&web_id=1194936&show=pic1" language="JavaScript" charset="gb2312"></script>

[编辑]文章分类

[编辑]Blog

【01】Flyingis

【02】TerryLee's Tech Space

【03】布尔的cnblogs boolean

【09】AJAXBBS.NET Yemoo'S Blog

[编辑]JavaScript

【01】Javascript.about.com

【02】Javascript Toolbox

【03】JavaScript Source

【04】JavaScript Kit

【05】O'Reilly : JavaScript

【06】JavaScript and Ajax Tips & Tutorials

【07】DIY部落

【08】Nettuts+

【09】Rhino - JavaScript for Java

[编辑]JQuery

[编辑]JSON

[编辑]Prototype

【03】Developer Notes for prototype.js（version 1.5.0）

[编辑]Web

【01】CssRain

【02】网页设计师

【03】EarthWeb.com: The IT Industry Portal

【04】布啦布啦

【05】CSS论坛

[编辑]代码优化系列文章

【Java】如何让你的程序运行的更快(1)---"String" VS "StringBuffer"

【Java】如何让你的程序运行的更快(1)之续---揭秘StringBuffer的capacity

【JavaScript】JavaScript中字符串连接性能优化

[编辑]教程

[编辑]开源

[编辑]论坛

【04】IBM developerWorks 中国

【05】51JS -- 无忧脚本

存档

CSS+JavaScript 实现TabPane页签收藏

CSS+JavaScript 实现TabPane页签

马嘉楠 2008-12-30

共同学习，欢迎转载。转载请注明地址【http://blog.csdn.net/majianan/archive/2008/12/30/3646565.aspx】，谢谢！

CSS+JavaScript 实现TabPane页签功能，支持二级tabPane（tabPane嵌套）。

如果标题的长度大于设置的width值，则用“...”来显示。但是FF不支持该效果，由于CSS水平有限，暂时没有修改！- -

效果如下图：

使用前提，在HTML页面中引入一个CSS文件，和一个JavaScript文件。如下：

 <HEAD>
  <TITLE>Css + Javascript = tabPane</TITLE>
  <META NAME="Author" CONTENT="majianan">
  <script type="text/javascript" src="tabPane.js"></script>
    <link type="text/css" rel="stylesheet"  href="tabPane.css"  />
 </HEAD>

引入CSS文件：<link type="text/css" rel="stylesheet" href="tabPane.css" />

引入JavaScript文件：<script type="text/javascript" src="tabPane.js"></script>

代码见后

对于每一个tab页分别创建一个DIV来显示。例如代码中的"testTabDiv"、"basicInfo"、"btns1"等

<BODY>
    
<div id="testTabDiv" style="width:800px;"></div>
<div id="basicInfo" style="padding:8px;">       
    <table>
        <tr><td>姓 名:</td><td><input type="text" id="text1" /></td></tr>
        <tr><td>性 别:</td><td><input type="text" id="text2" /></td></tr>
        <tr><td>民 族:</td><td><input type="text" id="text3" /></td></tr>
        <tr><td>学 历:</td><td><input type="text" id="text4" /></td></tr>         
        <tr><td>公 司:</td><td><input type="text" id="text5" /></td></tr>
        <tr><td>职 务:</td><td><input type="text" id="text5" /></td></tr>
        <tr><td>年 薪:</td><td><input type="text" id="text5" /></td></tr>
    </table>
</div>
<div id="btns" style="padding:8px;"></div> 
<div id="myBlog" style="padding:8px;">
 <iframe src="http://www.baidu.com" style="width:95%;height:500">
</iframe>
</div> 
<div id="btns1" style="padding:8px;">
    <table border="0" cellpadding="0" cellspacing="1" class="border5"  bgcolor="#BCDDF8">
        <tr id="trEdit">
            <td><input class="button" type="button" value="Edit" style="width:100px"></td>
        </tr>
        <tr id="trDel">
            <td><input class="button" type="button" value="Delete" style="width:100px"></td>
        </tr>
    </table>
</div> 
<div id="basicInfo1" style="padding:8px;">      
<table>     
    <tr><td>公 司:</td><td><input type="text" id="text5" /></td></tr>
    <tr><td>职 务:</td><td><input type="text" id="text5" /></td></tr>
    <tr><td>年 薪:</td><td><input type="text" id="text5" /></td></tr>
</table>
</div>
<div id="basicInfo2" style="padding:8px;height:300">        
<table>
    <tr><td>姓 名:</td><td><input type="text" id="text1" /></td></tr>
    <tr><td>性 别:</td><td><input type="text" id="text2" /></td></tr>
    <tr><td>民 族:</td><td><input type="text" id="text3" /></td></tr>
    <tr><td>学 历:</td><td><input type="text" id="text4" /></td></tr>
</table>
</div>
 </BODY>
 <script>
    var tp = new TabPane("testTabDiv");
    tp.addTabPage({title:"Test New Func" ,width:100 ,panel:"basicInfo"});
    tp.addTabPage({title:"CSDN Blog Web JavaScript" ,width:100 ,panel:"btns"});     
    tp.addTabPage({title:"My Blog URL" ,width:100 ,panel:"myBlog"});
        
    tp = new TabPane("btns");
    tp.addTabPage({title:"basicInfo1" ,width:150 ,panel:"basicInfo1"});
    tp.addTabPage({title:"basicInfo2" ,width:150 ,panel:"basicInfo2"});
    tp.addTabPage({title:"btns1" ,width:150 ,panel:"btns1"});
    </script>

生成tab页JavaScript代码说明：

1）var tp = new TabPane("testTabDiv");

创建一个tab页，参数为一个String：目标DIV的id。

2） tp.addTabPage({title:"Test New Func" ,width:100 ,panel:"basicInfo"});

向tab页中添加内容。

参数为一个Object：包括title、width、panel等属性。

title：tab页显示的标题。

width：设置标题的宽度。

panel：tab页中所要显示的DIV.id。

3）二级tab页，只需要重复上面操作即可。例如

tp = new TabPane("btns");

tp.addTabPage({title:"basicInfo1" ,width:150 ,panel:"basicInfo1"});

tp.addTabPage({title:"basicInfo2" ,width:150 ,panel:"basicInfo2"});

tp.addTabPage({title:"btns1" ,width:150 ,panel:"btns1"});

4）DIV的默认style为：

div{
  width:    100%;
  height:   auto;
}

也可以在DIV中特殊说明，例如：<div id="basicInfo2" style="padding:8px;height:300">

测试代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>Css + Javascript = tabPan</TITLE>
  <META NAME="Author" CONTENT="majianan">
  <script type="text/javascript" src="tabPane.js"></script>
    <link type="text/css" rel="stylesheet"  href="tabPane.css"  />
 </HEAD>
<BODY>
    
<div id="testTabDiv" style="width:800px;"></div>
<div id="basicInfo" style="padding:8px;">       
    <table>
        <tr><td>姓 名:</td><td><input type="text" id="text1" /></td></tr>
        <tr><td>性 别:</td><td><input type="text" id="text2" /></td></tr>
        <tr><td>民 族:</td><td><input type="text" id="text3" /></td></tr>
        <tr><td>学 历:</td><td><input type="text" id="text4" /></td></tr>         
        <tr><td>公 司:</td><td><input type="text" id="text5" /></td></tr>
        <tr><td>职 务:</td><td><input type="text" id="text5" /></td></tr>
        <tr><td>年 薪:</td><td><input type="text" id="text5" /></td></tr>
    </table>
</div>
<div id="btns" style="padding:8px;"></div> 
<div id="myBlog" style="padding:8px;">
 <iframe src="http://www.baidu.com" style="width:95%;height:500">
</iframe>
</div> 
<div id="btns1" style="padding:8px;">
    <table border="0" cellpadding="0" cellspacing="1" class="border5"  bgcolor="#BCDDF8">
        <tr id="trEdit">
            <td><input class="button" type="button" value="Edit" style="width:100px"></td>
        </tr>
        <tr id="trDel">
            <td><input class="button" type="button" value="Delete" style="width:100px"></td>
        </tr>
    </table>
</div> 
<div id="basicInfo1" style="padding:8px;">      
<table>     
    <tr><td>公 司:</td><td><input type="text" id="text5" /></td></tr>
    <tr><td>职 务:</td><td><input type="text" id="text5" /></td></tr>
    <tr><td>年 薪:</td><td><input type="text" id="text5" /></td></tr>
</table>
</div>
<div id="basicInfo2" style="padding:8px;height:300">        
<table>
    <tr><td>姓 名:</td><td><input type="text" id="text1" /></td></tr>
    <tr><td>性 别:</td><td><input type="text" id="text2" /></td></tr>
    <tr><td>民 族:</td><td><input type="text" id="text3" /></td></tr>
    <tr><td>学 历:</td><td><input type="text" id="text4" /></td></tr>
</table>
</div>
 </BODY>
 <script>
    var tp = new TabPane("testTabDiv");
    tp.addTabPage({title:"Test New Func" ,width:100 ,panel:"basicInfo"});
    tp.addTabPage({title:"CSDN Blog Web JavaScript" ,width:100 ,panel:"btns"});     
    tp.addTabPage({title:"My Blog URL" ,width:100 ,panel:"myBlog"});
        
    tp = new TabPane("btns");
    tp.addTabPage({title:"basicInfo1" ,width:150 ,panel:"basicInfo1"});
    tp.addTabPage({title:"basicInfo2 CSDN Blog" ,width:100 ,panel:"basicInfo2"});
    tp.addTabPage({title:"btns1" ,width:150 ,panel:"btns1"});
    </script>
</HTML>

tabPane.js

var TabPaneConfig = {
    idPrefix: "tab-panel-object-",
    idCounter: 0,
    getId: function(){ return this.idPrefix+this.idCounter++;},
    tabHeadId: "tabHead",
    tabHeadClass: "tab-head tab-border",
    tabBodyId: "tabBody",
    tabBodyClass: "tab-border"
}
function TabPane(id){
    this.id = id;
    this.height = "100%";
    this.width = "100%";
    
    this.tabPages = 0;
    this.head = null;
    this.body = null;   
}
TabPane.prototype.init = function(){    
    var r = document.getElementById(this.id);
    if(!r.style.overflow)   r.style.overflow = "auto";
    r.className = "tab";
    
    //create head 
    var div = document.createElement("div");
    div.id = TabPaneConfig.tabHeadId;
    div.className = TabPaneConfig.tabHeadClass;
    
    r.appendChild(div);
    this.head = div;
    
    var ul = document.createElement("ul");
    div.appendChild(ul);
    
    //create body 
    div = document.createElement("div");
    div.id = TabPaneConfig.tabBodyId;
    div.className = TabPaneConfig.tabBodyClass;
    
    r.appendChild(div); 
    this.body = div;
}
TabPane.prototype.addTabPage = function(obj){
    if(!document.getElementById(obj.panel)) return;
    if(!this.tabPages)  this.init();    
        
    this.head.firstChild.appendChild(this.createTabTitle(obj));
    this.body.appendChild(document.getElementById(obj.panel));  
    this.tabPages++;
}
TabPane.prototype.createTabTitle = function(obj){
    var li = document.createElement("li");
    li.id = TabPaneConfig.getId();  
    li.data = obj.panel;
    li.onclick=tabOnClick;
    li.style.width = obj.width;
    
    if(this.tabPages){
        li.className="";
        document.getElementById(obj.panel).style.display="none";    
    }else{
        li.className="hover";
        document.getElementById(obj.panel).style.display="block";   
    }
        
    var textNode = document.createTextNode(obj.title);
    li.appendChild(textNode);
    
    return li;
}
function tabOnClick(){  
  var event = window.event || arguments[0];
  var element = event.srcElement || event.target;  
    var liArr = element.parentNode.getElementsByTagName("li");
    for(var i=0; i<liArr.length; i++){
        liArr[i].className="";
        document.getElementById(liArr[i].data).style.display="none";
    }
    element.className="hover";  
    document.getElementById(element.data).style.display="block";
}

tabPane.css

div{
    width:  100%;
    height: auto;
}
.tab {
    font-family:    Verdana, Helvetica, Arial;
    font-size:      12px;
    position:   relative;
    width:      100%;
}
.tab-border {border:1px solid;border-color: rgb(120,172,255);}
.tab-head {
    background-color:rgb(234,242,255);;
    border:0px;
    height:23px;
    line-height:20px;
    position:relative;  
}
.tab-head ul{
    border:0px;
    height:23px;
    list-style:none;     
    margin:0px;     
    text-align:center;
    padding:0;
    position:absolute;
    
}
.tab-head li{   
    border: 1px solid;
    border-color:   rgb(120,172,255);
    border-left:    0;
    border-bottom:  0;
    border-top:     0;
    cursor:pointer;
    color:#416AA3;  
    float:left;
    display:block;
    height:22px;!important;height:20px;
    line-height:20px; 
    padding:        2px 6px 0px 6px;
    margin-top: 2px;
    margin-right:   -1px;
    text-overflow:ellipsis; 
    white-space:nowrap; 
    overflow:hidden;
}
.tab-head li.hover{
    border:         1px solid rgb(120,172,255);
    border-bottom:  0;
    padding:        0px 6px 3px 6px;
    margin:         0px 1px 0px 0px;
    background:     white;
    font-size:          13px;
    font-weight:    bold;
    color:              rgb(0,66,174);
    overflow:visible;   
}