仿126邮箱标签

欢迎各位多批评指正，以能够完善演示<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript">
var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6); var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
}; var Class = {
create: function() {
return function() { this.Init.apply(this, arguments); }
}
} var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
} var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments,2);
return function() {
return fun.apply(object, args);
}
} var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments,2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
} var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
} function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
}; function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else { 
oTarget["on" + sEventType] = null;
}
};  </script>
  <style type="text/css">
a{
underline:none;
} #header{
background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f2.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
position: relative;
width:800px;
height:63px;
}
#menu{
white-space:nowrap;
height:28px;
width:700px;
position:absolute;
bottom: 6px;
left: 50px;
overflow:hidden;
white-space:nowrap;
}
#menu div{
float: left;
clear: right;
cursor: pointer;
}
#menu div table{
border: 0px;
padding: 0px;
margin: 0px;
} #menu div table td{
height: 30px;
text-align: left;
vertical-align: bottom;
padding-top: 2px;
line-height : 28px;
} .AtdL{
width:5px;
background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f1.gif');
background-repeat: no-repeat;
background-position: -457px -58px;
} .AtdM{
background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f2.gif');
background-repeat: repeat-x;
background-position: 0px -181px;
font-family: 宋体;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
} .AtdR{
width: 5px;
background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f1.gif');
background-repeat: no-repeat;
background-position: -471px -58px;
} .ItdL{
width:6px;
background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f1.gif');
background-repeat: no-repeat;
background-position: -456px -16px;
} .ItdM{
background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f2.gif');
background-repeat: repeat-x;
background-position: 0px -139px;
font-family: 宋体;
font-size: 13px;
font-weight: bold;
color: #669EBA;
} .ItdR{
width: 7px;
background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f1.gif');
background-repeat: no-repeat;
background-position: -471px -16px;
} #menu table td a
{
display: block;
height: 15px;
width: 15px;
padding-bottom: 3px;
} .AtdM a{
background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f3.gif');
background-repeat: no-repeat;
background-position: -159px -100px;
} .AtdM a:hover{
background-position: -159px -142px;
}
.ItdM a{
background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f3.gif');
background-repeat: no-repeat;
background-position: -181px -180px;
} .ItdM a:hover
{ 
background-position: -159px -180px;
} .closeall{
margin-top:5px;
}
.closeall a{
background-image: url('http://mimg.126.net/p/dm3style/lib/1001261008/share_blue/f1.gif');
background-repeat: no-repeat;
background-position: -0px -227px;
display: block;
height: 21px;
width: 25px;
}
.closeall a:hover{
background-position: -32px -227px;
}  </style>  <!--[if IE]>
  <style type="text/css">
#menu {
bottom: 5px;
}
  </style>
  <![endif]-->

解决方案 »

  1.   

    接上  <script type="text/javascript"> //从数组中删除元素
    var Delete = function(array, elem){
    for(var i = 0; i < array.length; i++){
    if(array[i] == elem){
    for(var j = i; j < array.length; j++){
    if((j + 1) < array.length){
    array[j] = array[j + 1];
    }
    }
    array.length--;
    return true;
    }
    }
    return false;
    } var DynamicTab = Class.create();
    DynamicTab.prototype = {
    Init: function(menu_container, options){
    this.MenuContainer = $(menu_container);//标签所在的容器
    this.SetOptions(options);
    this.MaxWidth = this.Options.maxwidth;
    this.activeTab = null; //当前激活Tab
    this.tabs = []; //保存标签
    this.activeTabs = []; //保存标签激活顺序
    this.count = 0; //记录标签个数
    this.closeWidth = 25; //关闭所有按钮宽度'
    this.closeElement = null;
    this.closeflag = false; //是否显示了所有关闭按钮 },
    SetOptions: function(options){
    this.Options = {
    maxwidth: "120" //标签最大宽度
    };
    Extend(this.Options, options || {});
    },
    //title标题
    //active是否激活
    //close是否有关闭按钮
    //target指定标签,若不存在打开新标签
    AddTab: function(title, active, close, target){
    if(!this.Target(target)){
    //tab
    var tab = document.createElement("div");
    tab.close = close; //设置是否关闭标志
    tab.target = target; //内部table布局
    var t = document.createElement("table");
    t.cellPadding = "0"; t.cellSpacing = "0";
    with(t.style){ width = "100%"; height = "100%"; tableLayout = "fixed"; }
    if(isIE){ t.style.srcFloat = "left"; t.style.clear = "right";} //IE使用srcFloat
    else { t.style.cssFloat = "left"; t.style.clear = "right";} //FF使用cssFloat
    t.setAttribute("tabname", title);
    var tr = t.insertRow(-1); var td = tr.insertCell(-1);
    with(td.style){ overflow = "hidden"; whiteSpace = "nowrap"; } //这一单元格显示标题
    td = tr.insertCell(-1);
    with(td.style){ overflow = "hidden"; whiteSpace = "nowrap"; }
    td.innerHTML="<nobr>" + title + "</nobr>"; td.title = title; //这一单元格用于添加关闭按钮
    td = tr.insertCell(-1);
    with(td.style){ overflow = "hidden"; whiteSpace = "nowrap"; }
    td.style.width = "15px"; //判断是否添加关闭按钮
    if(close){
    var c = document.createElement("a");
    c.href = "javascript:void(0);";
    c.title = "关闭";
    c.hideFocus = true;
    td.appendChild(c);//this.MenuContainer.innerText = this.MenuContainer.innerHTML;
    addEventHandler(c,"click",BindAsEventListener(this,this.Close,tab));
    } td = tr.insertCell(-1);
    with(td.style){ overflow = "hidden"; whiteSpace = "nowrap"; } tab.appendChild(t);
    tab.style.width = this.MaxWidth + "px"; tab.index = this.tabs.length; //定义tab序号
    this.count ++; //tab计数
    this.tabs[this.tabs.length] = tab; //保存tab到数组
    this.Resize(); //调整tab宽度 //设置激活样式
    if(active || this.activeTab == null){
    this.ActivateTab(tab);
    }
    else{
    this.InactivateTab(tab);
    } //判断插入tab位置
    if(!this.closeflag){
    this.MenuContainer.appendChild(tab);
    }
    else if(this.closeElement != null){
    this.MenuContainer.insertBefore(tab, this.closeElement);
    }
    addEventHandler(tab,"click",Bind(this, this.MouseClick, tab));
    }
    },
    //激活标签
    ActivateTab: function(tab){
    if(this.activeTab != null){
    this.InactivateTab(this.activeTab);
    }
    this.activeTab = tab;
    this.SetActiveClass(this.activeTab); //更新激活标签顺序，激活顺序在数组中为从后到前
    Delete(this.activeTabs, tab);
    this.activeTabs[this.activeTabs.length] = this.activeTab; if(this.activeTabs.length - 2>=0){
    this.InactivateTab(this.activeTabs[this.activeTabs.length - 2]);
    }
    },
    //取消激活
    InactivateTab: function(tab){
    this.SetInActiveClass(tab);
    },
    MouseClick: function(tab){
    if(tab != this.activeTab){
    this.ActivateTab(tab);
    }
    },
    //重新调整标签宽度
    Resize: function(){
    if(this.count * this.MaxWidth >= this.MenuContainer.offsetWidth){
    this.AddCloseTab();
    var width = Math.floor((this.MenuContainer.offsetWidth - this.closeWidth) / this.count);
    for(i in this.tabs){
    this.tabs[i].style.width = width + "px";
    }
    }
    else{
    this.RemoveCloseTab();
    for(i in this.tabs){
    this.tabs[i].style.width = this.MaxWidth;
    }
    }
    },
    //关闭标签
    Close: function(e, tab){
    //防止冒泡
    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; this.MenuContainer.removeChild(tab);
    delete this.tabs[tab.index];
    this.count --;
    if(this.activeTabs.length > 0){
    if(tab == this.activeTab && this.activeTabs.length - 2 >= 0){
    this.activeTab = this.activeTabs[this.activeTabs.length - 2];
    this.SetActiveClass(this.activeTab);
    }
    Delete(this.activeTabs, tab);
    }
    this.Resize();
    },
    //添加关闭全部按钮
    AddCloseTab: function(){
    if(!this.closeflag){
    this.closeflag = true;
    this.closeElement = document.createElement("div");
    this.closeElement.className = "closeall";
    this.closeElement.id = "divMenuCloseAll";
    var c = document.createElement("a");
    c.href="javascript:void(0);";
    c.title = "关闭全部";
    c.hideFocus = true; //不显示超链接点击时的虚线框(IE)
    this.closeElement.appendChild(c);
    addEventHandler(c,"click",Bind(this, this.CloseAllTabs));
    this.closeElement.style.width = "25px";
    this.MenuContainer.appendChild(this.closeElement);
    }
    },
    //移除全部关闭按钮
    RemoveCloseTab: function(){
    if(this.closeflag && this.closeElement != null){
    this.closeflag = false;
    this.MenuContainer.removeChild(this.closeElement);
    }
    },
    //关闭全部可关闭标签
    CloseAllTabs: function(){
    var temp = []
    for (i in this.tabs)
    {
    //alert(this.tabs[i].close);
    if(this.tabs[i].close){
    this.MenuContainer.removeChild(this.tabs[i]);
    this.count--;
    Delete(this.activeTabs, this.tabs[i]);//从激活顺序列表中删除
    this.Resize();
    }
    else{
    this.tabs[i].index = temp.length;//重置序号
    temp[temp.length] = this.tabs[i];
    }
    }
    this.tabs = temp;
    if(this.activeTabs.length > 0){
    this.activeTab = this.activeTabs[this.activeTabs.length - 1];
    this.SetActiveClass(this.activeTab);
    }
    },
    //设置激活标签样式
    SetActiveClass: function(tab){
    var td = tab.getElementsByTagName("td");
    td[0].className = "AtdL";
    td[1].className = "AtdM";
    td[2].className = "AtdM";
    td[3].className = "AtdR";
    },
    //设置未激活标签样式
    SetInActiveClass: function(tab){
    var td = tab.getElementsByTagName("td");
    td[0].className = "ItdL";
    td[1].className = "ItdM";
    td[2].className = "ItdM";
    td[3].className = "ItdR";
    },
    //在相同标签中打开
    Target: function(target){
    if(target){
    for(i in this.tabs){
    if(this.tabs[i].target == target){
    this.ActivateTab(this.tabs[i]);
    return true;
    }
    }
    return false;
    }
    return false;
    }
    };
      </script>
     </head>
     <body>
     <div id="header">
    <div id="menu"> </div>
    </div>
    <input type="button" id="btnAddTab0" value="首页" />
    <input type="button" id="btnAddTab1" value="收件箱" />
    <input type="button" id="btnAddTab2" value="发件箱" />
    <input type="button" id="btnAddTab3" value="添加标签" />
    <script type="text/javascript">
    var tab = new DynamicTab("menu");
    $("btnAddTab0").onclick = function(){tab.AddTab("今日",true,false,"home");}
    $("btnAddTab1").onclick = function(){tab.AddTab("收件箱",true,true,"receive");}
    $("btnAddTab2").onclick = function(){tab.AddTab("发件箱",true,true,"send");}
    $("btnAddTab3").onclick = function(){tab.AddTab("空白页",true,true);} tab.AddTab("今日",true,false,"home");
    </script>
     </body>
    </html>