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

最新推荐文章于 2025-06-04 14:30:46 发布

xc008

最新推荐文章于 2025-06-04 14:30:46 发布

阅读量757

点赞数

分类专栏： ASP.NET 文章标签： function class delete google border url

ASP.NET 专栏收录该内容

34 篇文章

订阅专栏

<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].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("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","Ajax中国"," http://www.okajax.com",true));
}
window.onload=exampleStartMethod;
</script>
</html>