发一个比较漂亮的选项卡动态增删的效果

2020-05-12 我要评论

先放个图片，我改下代码。

<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('//www.qb5200.com//upload/20070928200415937.jpg') 0 0 no-repeat; 
        }         
        .default 
        { 
            background:url('//www.qb5200.com//upload/20070928200415937.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> 
    <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","","//www.qb5200.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","","//www.qb5200.com",true));     
} 
window.onload=exampleStartMethod; 
</script> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

代码说明
1.我的CSS分割为2段了，第一段为此演视用，可自己定制，第二段为此框架必须。
2.script我也分割为2段，第一段为必须，第二段为客户定制的，我这里的代码是给一个实现参考。
3.以下的HTML代码为参考实现的必须容器代码

复制代码代码如下:

使用介绍:
1.ItemsPanel对象
   构造方法：new Asgard.CardProgram.ItemsPanel("itemsPanel","cardFrame").
   接受的2个参数，第一个为ul容器ID，第二个为我们需要展现标签对应的内容的irame的ID 。
   ItemPanel对象使用addItem方法添加Item。
   如果你需要创建多个ItemsPanel，可以自己参考我的范例来进行。
2.Item对象
   构造方法：new Asgard.CardProgram.Item("index","时空创意","http://www.skst.com.cn",true)接受4个参数
   第一个为打算创建的选项卡的id，第二个为打算创建的选项卡的标题，第三个为此选项卡对应的URL，第四个为是否为首页，因为我们也许会打算创建一个默认页面不允许关闭。当然如果你全部设置为true，那么也就是正常的选项卡效果了。

带缓冲的收缩与展开内容效果

发一个比较漂亮的选项卡动态增删的效果

相关文章

猜您喜欢

今日热门