浏览 3878 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-05-08
顺便贴一个我写的
代码 <!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]
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2007-05-09
最好来个截图啊
|
| 返回顶楼 | |
|
发表时间：2007-05-09
同意ls的意见，最好截图 + 源码压缩包
|
| 返回顶楼 | |
