Oo缘来是你oO


posts - 120,comments - 125,trackbacks - 0

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.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;    
}


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"
;
}






马嘉楠
jianan.ma@gmail.com

posted on 2008-12-30 14:35 马嘉楠 阅读(4000) 评论(2)  编辑  收藏 所属分类: SoureCodeJava ScriptWeb 页面

FeedBack:
# re: 【原】CSS+JavaScript 实现TabPane页签
2008-12-30 16:07 | HiMagic!
code还真不少,试一下tabless的实现方法吧  回复  更多评论
  
# re: 【原】CSS+JavaScript 实现TabPane页签
2008-12-30 16:19 | 梦想在这里起飞
这个写得不错,看看我的这个:
完全开源、免费的报表设计器:
http://ireport.cubebi.com
  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: