js后台动态添加窗口代码,欢迎下载使用资源-CSDN文库

共1个文件

html：1个

后台动态添加窗口代码,欢迎下载使用

需积分: 9 148 浏览量 2008-11-14 08:35:49 上传评论收藏 3KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

__添加窗口.rar （1个子文件）

动态添加窗口.html 10KB

<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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></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 eleme

评论收藏

内容反馈