信鸽网

JS实现仿Windows经典风格的选项卡Tab切换代码

  作者：bea

本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码。分享给大家供大家参考，具体如下： 这款仿Windows风格的选项卡，带有灰色的立体感，示例内容是用JS控制输出，只是为了演示功能，你在用的时候完全可以去掉的。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/js-f-windows-style-tab-demo/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码。分享给大家供大家参考，具体如下：


这款仿Windows风格的选项卡，带有灰色的立体感，示例内容是用JS控制输出，只是为了演示功能，你在用的时候完全可以去掉的。


运行效果截图如下：



在线演示地址如下：


http://demo./js/2015/js-f-windows-style-tab-demo/


具体代码如下：




<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>选项卡</title>

<style type="text/css">

body{

 background-color:#CCC;

}

.tab{

 margin:0;

 padding:0;

 position:absolute;

}

.tab li{

 float:left;

 list-style:none;

}

.tab li span{

 float:left;

 display:block;

 height:20px;

 line-height:20px;

 position:relative;

 border-style:solid;

 border-width:1px 1px 0 1px;

 border-color:#EEE #999 #777 #DDD;

 background-color:#CCC;

 margin:1px 2px 0 0;

 padding:0 5px 0 5px;

 font-size:12px;

 cursor:pointer;

 z-index:1;

}

.tab li div{

 display:none;

 position:absolute;

 top:22px;

 left:0px;

 background-color:#CCC;

 border:1px solid;

 border-color:#EEE #999 #777 #DDD;

 text-align:center;

 overflow:auto;

}

.tab li.selected span{

 margin-top:0;

 height:22px;

}

.tab li.selected div{

 display:block;

}

</style>

<script type="text/javascript">

function CreateTab(tab_width,tab_height,parent_obj){

 var newtab=document.createElement("UL");

 newtab.className="tab";

 parent_obj.appendChild(newtab);

 Tab.call(newtab);

 newtab.style.width=tab_width+"px";

 newtab.style.height=tab_height+"px";

 return newtab;

}

function Tab(){

 var this_tab=this;

 this.selected_page;

 this.page_names=new Array();

 this.page_contents=new Array();

 this.Select=function(){

  this_tab.selected_page.className="";

  this.className="selected";

  this_tab.selected_page=this;

 }

 this.NewPage=function(page_name){

  var newpage=document.createElement("LI");

  newpage.onclick=this.Select;

  newpage.innerHTML="<span>"+page_name+"</span><div></div>";

  this.appendChild(newpage);

  newpage.lastChild.style.width=parseInt(this.style.width)-2+"px";

  newpage.lastChild.style.height=parseInt(this.style.height)-24+"px";

  this.page_names.push(newpage.firstChild);

  this.page_contents.push(newpage.lastChild);

  return newpage;

 }

 this.SetChecked=function(page_index){

  if(page_index>-1&&this.childNodes.length>page_index){

   this.selected_page=this.childNodes[page_index];

   this.selected_page.className="selected";

  }

 }

}

</script>

</head>

<body>

<script type="text/javascript">

var newtab=CreateTab(400,300,document.body);

 newtab.NewPage("第一页");

 newtab.NewPage("第二页");

 newtab.NewPage("第三页");

 newtab.NewPage("第四页");

 newtab.NewPage("第五页");

 newtab.SetChecked(0);

 newtab.style.top="100px";

 newtab.style.left="200px";

 for(var i=0;i<newtab.childNodes.length;i++){

  newtab.page_contents[i].innerHTML=function(number){

   var content_str="";

   for(var n=0;n<1;n++){

    content_str+="<br />---------------这是第"+number+"页---------------";

   }

   return content_str;

  }(i+1);

 }

</script>

</body>

</html>


希望本文所述对大家JavaScript程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: