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

发布于 2017-07-19 22:33:57 | 142 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

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

<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://www.jb51.net//upload/20070928200415937.jpg') 0 0 no-repeat; 
        }         
        .default 
        { 
            background:url('http://www.jb51.net//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> 
1.代码效果示例： 
<ul>     
    <li class="active"> 
        <nobr class="title">Kiss</nobr> 
        <a href="#nogo" title="关闭"></a> 
    </li> 
    <li class="default"> 
        <nobr class="title">Andy</nobr> 
        <a href="#nogo" title="关闭"></a> 
    </li>     
</ul> 
<p /> 
注：以上代码为DOM动态组织的代码参考 
<p/> 
<p /> 
2.点击下表，更换内容 
<ul id="asgardCard"> 
<li title="blueidea">蓝色理想</li> 
<li title="google">Google中国</li> 
<li title="email126">Email-126</li> 
<li title="ngacn">艾泽拉斯</li> 
</ul> 
<p/> 
3.以下为动态创建： 
<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","phperz","http://www.jb51.net",false)); 
    }     
} 
var itemsPanel=null; 
function exampleStartMethod() 
{ 
    attachExampleEvent(); 
    if(itemsPanel==null) 
        itemsPanel=new Asgard.CardProgram.ItemsPanel("itemsPanel","cardFrame"); 
    itemsPanel.addItem(new Asgard.CardProgram.Item("index","phperz","http://www.jb51.net",true));     
} 
window.onload=exampleStartMethod; 
</script> 
</html>

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

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


<ul id="itemsPanel"> 
</ul> 
<div id="cardContent"> 
    <iframe id="cardFrame"> 
    </iframe> 
</div>

使用介绍:
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，那么也就是正常的选项卡效果了。

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

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他