动态删减选项卡的效果示例

最新推荐文章于 2021-05-30 18:47:04 发布
haige807
最新推荐文章于 2021-05-30 18:47:04 发布
阅读量163
点赞数
分类专栏： js 文章标签： prototype Google BBS CSS Ajax
本文链接：https://blog.csdn.net/haige807/article/details/83739742
版权
js 专栏收录该内容
30 篇文章 0 订阅
订阅专栏
<html>
<head>
 <title>163邮箱选项卡效果</title>
 <script>
 </script>
 <style>
  ul,li
  {
   margin:0;
   padding:0;
   list-style:none;
   /*for close location*/
   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>
  /*Asgard CardProgram Css Start*/
  #itemsPanel,#itemsPanel li
  {
   margin:0;
   padding:0;
   list-style:none;
   /*for close location*/
   position:relative; 
  }
  /*Clear Float：Referrence-->http://www.blueidea.com/tech/web/2005/3065.asp*/
  /*There is defect:the attribute-content hold one line place.*/
  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('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') 0 0 no-repeat;
  }  
  .default
  {
   background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.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('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') 0 -50px no-repeat;
  }
  .default .title
  {
   color:#999999;
  }
  .active .title
  {
   color:#000000;
  }
  .active .close:hover
  {
   background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -10px -50px no-repeat;
  }
  .default .close
  {
   background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -20px -50px no-repeat;
  }
  .default .close:hover
  {
   background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -30px -50px no-repeat;
  }
  /*Asgard CardProgram Css End*/
 </style>
</head>
<body>
<span>1.代码效果示例：</span>
<ul> 
 <li class="active">
  <nobr class="title">Kiss</nobr>
  <a href="#nogo" class="close" title="关闭"></a>
 </li>
 <li class="default">
  <nobr class="title">Andy</nobr>
  <a href="#nogo" class="close" title="关闭"></a>
 </li> 
</ul>
<p />
<span>注：以上代码为DOM动态组织的代码参考<span>
<p style="clear:both;"/>
<p />
<span>2.点击下表，更换内容</span>
<ul id="asgardCard">
<li title="blueidea">蓝色理想</li>
<li title="google">Google中国</li>
<li title="email126">Email-126</li>
<li title="ngacn">艾泽拉斯</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>
/*
* Field Declare ^-^ 
*/
var Asgard;
if(!Asgard)
 Asgard={};
if(!Asgard.CardProgram)
 Asgard.CardProgram={};
/*
*function:define Object ItemsPanel
*/
Asgard.CardProgram.ItemsPanel=function(id,frameId)
{
 this.element=$(id);
 this.register=new Array();
 this.currentItem=null;
 this.cardFrame=$(frameId);
 this.element.className='itemsPanel';
}
/*
*function:add item from panel
*/
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);
}
/*
*function:delete item from panel
*/
Asgard.CardProgram.ItemsPanel.prototype.deleteItem=function(item)
{   
 this.visitedRegister(item,"delete");
 this.element.removeChild(item.element);
}
/*
*Ajax or other 
*/
Asgard.CardProgram.ItemsPanel.prototype.changeSubPage=function()
{
 if(this.register.length==0)
 {
  this.cardFrame.src="";
  return;
 }
 
 this.cardFrame.src=this.currentItem.url;
 /*
 *这里用户可以自己定义想要的页面，如果你想内嵌IFrame。
 */
}
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;
}
/*
*function:register visited sequence
*      type--add | delete | active
*/
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();
 }
}
/*
*function:define Object Item
*/
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();
};
/*
*function:init item
*/
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>"+"<a href='#nogo' class='close' title='关闭'></a>";  
  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();});
 }
 
}
/*
*active item
*/
Asgard.CardProgram.Item.prototype.activeItem=function()
{
 this.panel.visitedRegister(this,"active");
 this.element.className="active"; 
}
/*
*function:reset item
*/
Asgard.CardProgram.Item.prototype.resetItem=function()
{
 this.element.className="default"; 
}
/*
*function:destroy item
*/
Asgard.CardProgram.Item.prototype.destroyItem=function()
{
 this.panel.deleteItem(this);
}
/*
*function:addListener to item
*/
Asgard.CardProgram.Item.prototype.addEventListener=function(element,type,handler)
{
 if(element.addEventListener)
  element.addEventListener(type,handler,true);
 else
  element.attachEvent("on"+type,handler,true);
}
/*
*function:usefull functions
*/
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].οnclick=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("blueidea","蓝色理想","http://www.blueidea.com",false));
 }
 else if(source.getAttribute('title')=='google')
 {
   itemsPanel.addItem(new Asgard.CardProgram.Item("google","Google中国","http://www.google.cn",false));
 }
 else if(source.getAttribute('title')=='email126')
 {
   itemsPanel.addItem(new Asgard.CardProgram.Item("email126","Email-126","http://mail.126.com",false));
 }
 else if(source.getAttribute('title')=='ngacn')
 {
   itemsPanel.addItem(new Asgard.CardProgram.Item("ngacn","艾泽拉斯","http://www.ngacn.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","时空创意","http://www.skst.com.cn",true)); 
}
window.οnlοad=exampleStartMethod;
</script>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
效果：