<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;
}
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('/upload/163tab.jpg') 0 0 no-repeat;
}
.default
{
background:url('/upload/163tab.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('/upload/163tab.jpg') 0 -50px no-repeat;
}
.default .title
{
color:#999999;
}
.active .title
{
color:#000000;
}
.active .close:hover
{
background:url('/upload/163tab.jpg') -10px -50px no-repeat;
}
.default .close
{
background:url('/upload/163tab.jpg') -20px -50px no-repeat;
}
.default .close:hover
{
background:url('/upload/163tab.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="webkey">IT人家</li>
<li title="google">Google中国</li>
<li title="email126">Email-126</li>
<li title="companyease">企易动力</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].;
}
}
function exampleClickListener(e)
{
e=e || window.event;
var source=e.target || e.srcElement;
if(source.getAttribute('title')=='webkey')
{
itemsPanel.addItem(new Asgard.CardProgram.Item("webkey","IT人家","http://www.webkey.cn",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')=='companyease')
{
itemsPanel.addItem(new Asgard.CardProgram.Item("companyease","企易动力","http://www.companyease.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.companye.net",true));
}
window.;
</script>
</html>
posted @
2008-02-14 18:57
龍峸.大卫
阅读(
1286)
评论()
编辑
收藏
举报
