浏览 3873 次
精华帖 (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的意见,最好截图 + 源码压缩包
|
|
返回顶楼 | |