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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 发一个比较漂亮的选项卡动态增删的效果

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 304 ::

收藏到网摘: n/a

JS创建优美的页面滑动块效果 - Glider.js 可多次使用的仿126邮箱选项卡的源码

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

点击运行可以看到效果:

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

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

JS创建优美的页面滑动块效果 - Glider.js 可多次使用的仿126邮箱选项卡的源码

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

评论 (0) All

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