JavaScript动态选项卡添加的实现

2024-09-05 12:19:33

字体：大中小

来源：转载

供稿：网友

一款用JavaScript控制动态添加一组选项卡（Tabs）的效果，而且选项卡按钮也超美观。通过本示例可以学习如何动态创建一个选项卡，完全用JS技术实现，可以为您提供参考。

<html><head> <title>动态选项卡添加的实现</title> <script> </script> <style>  ul,li  {   margin:0;   padding:0;   list-style:none;   position:relative;   }  li  {   display:block;   width:130px;   height:25px;   float:left;   cursor:pointer;   overflow:hidden;  }  span  {   font-size:10pt;   color:#22b5d9;   font-weight:bold;   display:block;  }  #asgardCard li  {   font-size:10pt;   font-weight:bold;   color:#22b5d9;   border:1px solid #22b5d9;   margin:10px;   text-align:center;   line-height:1.5;  } </style>  <style>  #itemsPanel,#itemsPanel li  {   margin:0;   padding:0;   list-style:none;   position:relative;   }  ul:after  {      content: ".";       display: block;      height: 0;       clear: both;       visibility: hidden;  }  #cardContent  {   height:auto;   min-height:300px;   border:2px solid #cccccc;   clear:both;  }  #itemsPanel li  {   display:block;   width:130px;   height:25px;   float:left;   cursor:pointer;   overflow:hidden;  }  #cardFrame  {   width:100%;height:100%;border:1px solid #ffffff;margin:0;  }  .active  {      background:url('/jscss/demoimg/200904/dt_tabs.jpg') 0 0 no-repeat;  }    .default  {   background:url('/jscss/demoimg/200904/dt_tabs.jpg') 0 -25px no-repeat;  }  .title  {   font-size:10pt;   font-weight:bold;   line-height:2;   padding-left:10px;   display:block;   width:105px;   height:25px;  }  li .close  {      position:absolute;   top:9px;   left:115px;   display:block;   width:10px;   height:10px;   overflow:hidden;  }  .active .close  {   background:url('/jscss/demoimg/200904/dt_tabs.jpg') 0 -50px no-repeat;  }  .default .title  {   color:#999999;  }  .active .title  {   color:#000000;  }  .active .close:hover  {   background:url('/jscss/demoimg/200904/dt_tabs.jpg') -10px -50px no-repeat;  }  .default .close  {   background:url('/jscss/demoimg/200904/dt_tabs.jpg') -20px -50px no-repeat;  }  .default .close:hover  {   background:url('/jscss/demoimg/200904/dt_tabs.jpg') -30px -50px no-repeat;  } </style></head><body><span>1.示例：</span><ul>  <li class="active">  <nobr class="title">Kiss</nobr>   </li> <li class="default">  <nobr class="title">Andy</nobr>   </li> </ul><p /><br><span>注：以上代码为DOM动态组织的代码参考<span><p style="clear:both;"/><p /><span>2、点击更换内容</span><ul id="asgardCard"><li title="china">中国网</li><li title="baidu">百度搜索</li></ul><p style="clear:both;"/><span>3、动态创建选项卡</span><div> <ul id="itemsPanel"> </ul> <div id="cardContent"> <iframe id="cardFrame"> </iframe> </div></div></body><script>var Asgard;if(!Asgard) Asgard={};if(!Asgard.CardProgram) Asgard.CardProgram={};Asgard.CardProgram.ItemsPanel=function(id,frameId){ this.element=$(id); this.register=new Array(); this.currentItem=null; this.cardFrame=$(frameId); this.element.className='itemsPanel';}Asgard.CardProgram.ItemsPanel.prototype.addItem=function(item){ if(this.validateExist(item.element.getAttribute('id')))   return; item.panel=this; this.visitedRegister(item,"add"); this.element.appendChild(item.element);}Asgard.CardProgram.ItemsPanel.prototype.deleteItem=function(item){    this.visitedRegister(item,"delete"); this.element.removeChild(item.element);}Asgard.CardProgram.ItemsPanel.prototype.changeSubPage=function(){ if(this.register.length==0) {  this.cardFrame.src="";  return; }  this.cardFrame.src=this.currentItem.url;}Asgard.CardProgram.ItemsPanel.prototype.validateExist=function(id){ for(var i=0;i<this.register.length;i++) {  if(this.register[i].element.id==id)  {   return true;  } }  return false;}Asgard.CardProgram.ItemsPanel.prototype.visitedRegister=function(item,type){ var i=this.register.length; if(type=="add") {    for(var k=0;k<i;k++)  {   this.register[k].resetItem();  }  this.currentItem=item;  this.register[i]=item;  this.currentItem.element.className="active";    this.changeSubPage(); } else if(type=="delete") {       for(k=0;k<i;k++)  {   if(this.register[k]==item)   {    this.register.splice(k,1);    break;   }  }  if(item==this.currentItem)  {   i=this.register.length;   if(i>0)   {    this.currentItem=this.register[i-1];    this.currentItem.element.className="active";   }   else    this.currentItem=null;  }    this.changeSubPage(); } else if(type=="active") {  if(this.currentItem==item)   return;  else  {        for(k=0;k<i;k++)   {    if(this.register[k]==item)    {     this.register.splice(k,1);     break;    }   }      i=this.register.length;   for(k=0;k<i;k++)   {    this.register[k].resetItem();   }   this.currentItem=item;   this.register.push(item);  }    this.changeSubPage(); }}Asgard.CardProgram.Item=function(id,title,url,flag){  this.element=this.$C(); this.panel={}; this.id=id; this.title=title; this.url=url; this.flag=flag; this.init();};Asgard.CardProgram.Item.prototype.init=function(){ this.element.setAttribute('id',this.id); this.element.className="default";    var mirror=this; if(!this.flag) {    this.element.innerHTML="<nobr class='title' title='"+this.title+"'>"+this.title+"</nobr>"+"";    this.addEventListener(this.$ES(this.element,'nobr')[0],'click',function(){mirror.activeItem();});  this.addEventListener(this.$ES(this.element,'a')[0],'click',function(){mirror.destroyItem();}); } else {  this.element.innerHTML="<nobr class='title' title='"+this.title+"'>"+this.title+"</nobr>";   this.addEventListener(this.$ES(this.element,'nobr')[0],'click',function(){mirror.activeItem();}); } }Asgard.CardProgram.Item.prototype.activeItem=function(){ this.panel.visitedRegister(this,"active"); this.element.className="active"; }Asgard.CardProgram.Item.prototype.resetItem=function(){ this.element.className="default"; }Asgard.CardProgram.Item.prototype.destroyItem=function(){ this.panel.deleteItem(this);}Asgard.CardProgram.Item.prototype.addEventListener=function(element,type,handler){ if(element.addEventListener)  element.addEventListener(type,handler,true); else  element.attachEvent("on"+type,handler,true);}Asgard.CardProgram.Item.prototype.$C=function(tag){ if(tag  &&  typeof tag =="string")   return document.createElement(tag); else  return document.createElement('li');}Asgard.CardProgram.Item.prototype.$ES=function(element,tag){ return element.getElementsByTagName(tag);}function $(id){ return document.getElementById(id);}</script><script>function attachExampleEvent(){ var lists=$('asgardCard').getElementsByTagName('li'); for(var i=0;i<lists.length;i++) {  lists[i].onclick=exampleClickListener; }}function exampleClickListener(e){ e=e || window.event; var source=e.target || e.srcElement; if(source.getAttribute('title')=='blueidea') {   itemsPanel.addItem(new Asgard.CardProgram.Item("china","中国网","http://www.china.com",false)); } else if(source.getAttribute('title')=='ngacn') {   itemsPanel.addItem(new Asgard.CardProgram.Item("baidu","百度搜索","http://www.baidu.com",false)); } }var itemsPanel=null;function exampleStartMethod(){ attachExampleEvent(); if(itemsPanel==null)  itemsPanel=new Asgard.CardProgram.ItemsPanel("itemsPanel","cardFrame"); itemsPanel.addItem(new Asgard.CardProgram.Item("index","源码爱好者","/",true)); }window.onload=exampleStartMethod;</script></html>

上一篇：CSS下拉菜单

下一篇：DIV+CSS滑动门（仿网易）