打印

发一个选项卡动态增删的效果

asgardmoon [楼主]

笑笑十年

高级会员

帖子: 716
体力: 990
威望: 1
离线: 1 天

1^# 大中小发表于 2007-8-20 13:40

蓝色混迹多年，偷师学艺不少，这次花了2天时间写了点东西发出来送给需要的吧。

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

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

做西部数码代理.Cn1元国际45元

asgardmoon [楼主]

笑笑十年

高级会员

帖子: 716
体力: 990
威望: 1
离线: 1 天

2^# 大中小发表于 2007-8-20 13:41

重构完成 IE 6 IE7 FF Safari下通过 Opera目前不行。

<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","时空创意","http://www.skst.com.cn",true));	
}
window.onload=exampleStartMethod;
</script>
</html>

提示：您可以先修改部分代码再运行

代码说明
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，那么也就是正常的选项卡效果了。

[ 本帖最后由 asgardmoon 于 2007-8-21 17:28 编辑 ]

TOP

【美橙超级G空间】688元绑定10个子目录 | 500M免费网盘空间，文件永久保留，专业服务高端设计人员

goodlucklq

深蓝蝴蝶

高级会员

帖子: 449
体力: 887
威望: 2
当前: 山东青岛

专长 JS,.NET,MSSQL

3^# 大中小发表于 2007-8-20 13:42

我用ie6看,页面错乱的很厉害

TOP

请大家尊重和保护奥运知识产权。

asgardmoon [楼主]

笑笑十年

高级会员

帖子: 716
体力: 990
威望: 1
离线: 1 天

4^# 大中小发表于 2007-8-20 13:44

关闭标签后放到这里有点问题，老自动跳转，可以吧代码复制到本地在运行~

<我是说FF>

[ 本帖最后由 asgardmoon 于 2007-8-20 13:48 编辑 ]

TOP

您知道经典哪些会员写过书的吗？

您知道互联网职业和技能有哪些吗？

您知道网站运营核心是什么吗？

asgardmoon [楼主]

笑笑十年

高级会员

帖子: 716
体力: 990
威望: 1
离线: 1 天

5^# 大中小发表于 2007-8-20 13:45

回复 #3 goodlucklq 的帖子

哦，我改改吧，我没看IE6。。。。

改好了~~

[ 本帖最后由 asgardmoon 于 2007-8-20 13:47 编辑 ]

TOP

sun139

初级会员

帖子: 69
体力: 145
威望: 0
当前: 江苏无锡
离线: 8 天

专长 JAVA,Oracle,DBA

6^# 大中小发表于 2007-8-20 15:57

恩,是很不错.我收了，下来看看

平平淡淡生活

TOP

blueloveor

初级会员

帖子: 61
体力: 140
威望: 0

7^# 大中小发表于 2007-8-20 16:07

好
就是重载没解决

TOP

asgardmoon [楼主]

笑笑十年

高级会员

帖子: 716
体力: 990
威望: 1
离线: 1 天

8^# 大中小发表于 2007-8-20 16:30

还以为没人关注，哈哈~~

我把代码重构下，写个简单的教程。

TOP

kyukoi

初级会员

帖子: 45
体力: 59
威望: 0
离线: 8 天

专长 JS,JAVA,Oracle

9^# 大中小发表于 2007-8-21 16:51

你个鸟我服u
天天不上qq

TOP

yflc

初级会员

帖子: 72
体力: 162
威望: 0
当前: 广东广州
离线: 21 天

10^# 大中小发表于 2007-9-28 19:25

恩。可以。

TOP

304399008

初级会员

帖子: 35
体力: 77
威望: 0
离线: 26 天

11^# 大中小发表于 2007-10-18 22:21

很不错的说……

TOP

coffeekor

中级会员

帖子: 159
体力: 242
威望: 0
离线: 100 天

12^# 大中小发表于 2007-10-18 22:56

ff下关闭一个选项卡整个页面全关了

还是赞一个的说

TOP

banaeib

初级会员

帖子: 59
体力: 130
威望: 0
离线: 5 天

13^# 大中小发表于 2007-10-24 16:27

强...

TOP

jiqinggu

中级会员

帖子: 170
体力: 369
威望: 0
离线: 3 天

14^# 大中小发表于 2007-10-24 16:31

反过去，点一个消失一个，我就服你

TOP

wsoul

初级会员

帖子: 67
体力: 65
威望: 0
当前: 广东广州

专长 前端制作,.NET

15^# 大中小发表于 2008-5-8 09:05

这效果不错~`

TOP

xfcmamb

初级会员

帖子: 57
体力: 122
威望: 0
当前: 江西赣州

16^# 大中小发表于 2008-5-8 15:14

不错。。。

TOP

lovelylife

中级会员

帖子: 102
体力: 219
威望: 0
当前: 上海浦东
离线: 24 天

17^# 大中小发表于 2008-5-8 15:20

效果不错吧，努力总算没有白费，呵呵

支持右键关闭

====================================
http://onlyaa.com [javascript经典专区]

TOP

iskywang

中级会员

帖子: 282
体力: 492
威望: 0
当前: 北京海淀区
离线: 2 天

专长 网页设计,前端制作,JS

18^# 大中小发表于 2008-5-8 16:41

非常好，FF也兼容，

yiyiya2008

TOP

xilao

新手上路

帖子: 24
体力: 49
威望: 0
离线: 21 天

19^# 大中小发表于 2008-5-9 07:22

值得研究。

TOP

tangl198710

啸天皇帝

高级会员

帖子: 447
体力: 979
威望: 0
当前: 四川成都
离线: 1 天

专长 PHP,MySQL,MSSQL

20^# 大中小发表于 2008-5-9 09:01

这么古老的帖子都被你们找出来了。太好了

效果不错。

不过还是有一点不足的地方。

TOP

iskywang

中级会员

帖子: 282
体力: 492
威望: 0
当前: 北京海淀区
离线: 2 天

专长 网页设计,前端制作,JS

21^# 大中小发表于 2008-5-12 13:19

楼主，能改成选项卡宽度自适应

yiyiya2008

TOP

fishcynn

龙江曦月

中级会员

帖子: 227
体力: 454
威望: 0
当前: 福建泉州
离线: 6 天

专长 网页设计,前端制作,ASP

22^# 大中小发表于 2008-5-12 15:26

有点像现在常用的浏览器样式

TOP

huqiu2

初级会员

帖子: 68
体力: 144
威望: 0
离线: 3 天

23^# 大中小发表于 2008-5-13 15:47

直接做一个126的效果出来就好了

TOP

gongzhw

淘折网

中级会员

帖子: 276
体力: 379
威望: 0
离线: 1 天

24^# 大中小发表于 2008-5-14 09:19

厉害啊楼猪！！！

http://www.allss.com.cn

TOP

lin516

中级会员

帖子: 94
体力: 247
威望: 0
当前: 福建福州
离线: 1 天

25^# 大中小发表于 2008-5-22 13:40

好，不过好像每次切换都重新加载页面

中国Asp之家

TOP

anhuihanshan

新手上路

帖子: 30
体力: 33
威望: 0
离线: 2 天

26^# 大中小发表于 2008-5-28 22:28

楼主很强哟.

不管什么技术,既然你能表现出来,个人认为就不错,这种精神值得的表扬.

web018.com

TOP