一个选项卡效果

最新推荐文章于 2021-10-20 16:49:46 发布

wtcsy

最新推荐文章于 2021-10-20 16:49:46 发布

阅读量2k

点赞数

文章标签： function div iframe properties class object

本文链接：https://blog.youkuaiyun.com/wtcsy/article/details/4728033

版权

支持拖动

本打算支持键盘"→","←"的 ,可选中的那项总是无法获取到焦点,不知道为什么

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <style type="text/css"> body{ font-size:12px; } .ss{ height:100px; width:100px; background-color:#0033FF; } #cc{ height:auto; width:1100px; } #t{ width:auto; list-style-type : none; height:23px; padding:0px; margin:0px; } #t li{ color:#1F3A87; background-image:url(http://album.hi.youkuaiyun.com/app_uploads/wtcsy/20081208/114539064.p.gif); float:left; position:relative; height:23px; width:94px; margin-right:3px; text-align:center; line-height:23px; vertical-align:middle; z-index:2; cursor:pointer; } #t li.hover { background-image:url(http://album.hi.youkuaiyun.com/app_uploads/wtcsy/20091026/100748763.p.gif); color:#FFFFFF; } #t li.active { background-image:url(http://album.hi.youkuaiyun.com/app_uploads/wtcsy/20081208/114731767.p.gif); height:24px; font-weight:bold; } #c{ height:530px; width:1100px; _position:relative; _top:-1px; } #c div{ border:1px solid #064CA1; height:530px; margin:0 auto; } .tip{ height:23px; width:94px; border:1px solid #064ca1; background-image:url(http://album.hi.youkuaiyun.com/app_uploads/wtcsy/20091026/100748717.p.gif?d=20091026100848967); color:#1F3A87; line-height:23px; vertical-align:middle; text-align:center; font-size:12px; position:absolute; display:none; z-index:5; background-color:#FFFFFF; filter:alpha(opacity=50); opacity:0.5; } .ico{ background-image:url(http://album.hi.youkuaiyun.com/app_uploads/wtcsy/20091026/100748123.p.gif?d=20091026100923201); height:12px; width:12px; overflow:hidden; position:relative; top:2px; float:right; right:2px; display:none } </style> </head> <body> title:　　<input id='tt' value="笑话" type="text" style="width:150px"/><br> address:　<input id='cc' value="http://xiaohua.zol.com.cn/" type="text" style="width:350px"/><br> <input value="add" type="button" οnclick="add(wt.$('tt').elm.value,wt.$('cc').elm.value)" /> <hr style=" border:1px dashed #999999;"> <br> <div id='cc'> <ul id='t'> <li class="active">My Blog</li> <li>51js</li> <li>Blue-js</li> <li>我是空的</li> </ul> <div id='c'> <div > <iframe style="margin:10px;border:1px dashed #CCCCCC; width:98%; height:96%" frameborder="0" src="http://blog.youkuaiyun.com/wtcsy/"></iframe> </div> <div style="display:none"> <iframe style="margin:10px; border:1px dashed #CCCCCC; width:98%; height:96%" frameborder="0" src="http://bbs.51js.com/forumdisplay.php?fid=9"></iframe> </div> <div style="display:none"> <iframe style="margin:10px;border:1px dashed #CCCCCC; width:98%; height:96%" frameborder="0" src="http://bbs.blueidea.com/forum-1-1.html"></iframe> </div> <div style="display:none"></div> </div> </div> </div> <script language="javascript"> document.all&&document.execCommand("BackgroundImageCache", false, true); function Class(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class; } var Sys = { IE : navigator.userAgent.toLowerCase().match(/msie ([/d.]+)/), Firefox : navigator.userAgent.toLowerCase().match(/firefox//([/d.]+)/), Chrome : navigator.userAgent.toLowerCase().match(/chrome//([/d.]+)/), IE6 : document.all&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 6), IE7 : document.all&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 7), IE8 : document.all&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 8) } var wt = { elm: null, $ : function(id,p){ var arr = id.split(" "); this.elm = arr.length == 1?document.getElementById(id):document.getElementById(arr[0]).getElementsByTagName(arr[1]); return p?this.elm:wt; }, $$ : function(o,v,p){ this.elm = v?o.getElementsByTagName(v):o; return p?this.elm:wt; }, $G : function(i,p){ this.elm = this.elm[i]; return p?this.elm:wt; }, $C : function(o){ this.elm = document.createElement(o); return wt; }, $R : function(){ this.elm.parentNode.removeChild(this.elm); return wt; }, Html : function(str){ this.elm.innerHTML = str; return wt; }, Attr : function(k,v,p){ if(typeof k == "string") { if(!v) { if(this.elm.getAttribute(k)&&this.elm.getAttribute(k)!="[object]") return this.elm.getAttribute(k); else return this.elm[k]; } if(!Sys.IE6&&!Sys.IE7&&typeof v=="object") this.elm[k]=v; else this.elm.setAttribute(k,v); return wt; } if(typeof k == "object") for(var pro in k)this.elm.setAttribute(pro,k[pro]); return wt; }, appendTo : function(p){ p.appendChild(this.elm); return wt; }, insertBefore : function(old){ old.parentNode.insertBefore(this.elm,old); return wt; }, Css : function(k,v){ if(typeof k == "string") { if(!v)return this.CurrentStyle(this.elm)[k]; this.elm.style[k] = v ; return wt; } if(typeof k == "object") for(var pro in k)this.elm.style[pro] = k[pro]; return wt; }, Class : function(v){ this.elm.className = v; return wt; }, getTarget : function(e){ return e.srcElement||e.target; }, AddListener : function(e,fn){ this.elm.addEventListener?this.elm.addEventListener(e,fn,false):this.elm.attachEvent("on" + e,fn); return wt; }, RemoveListener : function(e,fn){ this.elm.removeEventListener?this.elm.removeEventListener(e,fn,false):this.elm.detachEvent("on" + e,fn); return wt; }, Bind : function(o,fn,args){ return function(){ return fn.apply(o,args||[]); } }, BindAsEventListener : function(o,fn,args){ return function(event){ return fn.apply(o,[event||window.event].concat(args)); } }, Extend : function(destination, source){ for (var property in source) { destination[property] = source[property]; } }, Bubble : function(e){ Sys.IE?(e.cancelBubble=true):(e.stopPropagation()); }, CurrentStyle : function(){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); } }; var Tab = new Class({ options :{ Link : "", hover : "hover", telm : "li", celm : "div", Event : "mousedown", tip : "tip", ID : 0, Max : 8, //最多有多少项 Min : 1, //最少有多少项 icostyle : "ico", oninit : function(){}, onchange : function(){}, onadd : function(){} }, initialize : function(titles,contents,options){ this.titles = titles; //列表头元素集 this.contents = contents; //显示内容元素集 this.hoverobj = null; //记录鼠标移上去的元素 this.isdrag = false; //是否拖动 wt.Extend(this.options,options); wt.Extend(this,this.options); this.tip = wt.$C("div").appendTo(document.body).Class(this.tip).elm; for(var i = 0,l = this.titles.length;i<l;i++) { var s =this.ID==i?{display:"block"}:{display:"none"}; var ico = wt.$C("div").insertBefore(this.titles[i].childNodes[0]); ico.Class(this.icostyle).Css(s).AddListener('mousedown',wt.BindAsEventListener(this,this.remove,[ico.elm.parentNode])); wt.$$(titles).$G(i).Attr("contact",this.contents[i]) this.addEvent(wt.$$(titles).$G(i)); } this.ID = this.titles[0]; }, addEvent : function(o){ o.AddListener(this.Event,wt.Bind(this,this.change,[o.elm])).AddListener('mousedown',wt.BindAsEventListener(this,this.drag,[o.elm])) o.AddListener('mouseover',wt.Bind(this,this.Hover,[o.elm])).AddListener('mouseout',wt.Bind(this,this.out,[o.elm])) o.AddListener('keyup',wt.BindAsEventListener(this,this.Key,[o.elm]));//加如键盘事件 }, change : function(o){ if(this.ID == o) return; var d = wt.$$(this.ID).Attr("contact"); var s = wt.$$(o).Attr("contact"); if(o.contact) { wt.$$(d).Css("display","none"); wt.$$(this.ID).Class(this.Link); wt.$$(this.ID,"div").$G(0).Css("display","none"); } wt.$$(s).Css("display","block"); wt.$$(o).Class(this.active); wt.$$(o,"div").$G(0).Css("display","block") this.ID = o; this.onchange(); }, add : function(t,c){ if(this.titles.length == this.Max) return; var c = wt.$C(this.celm).appendTo(this.contents[0].parentNode).Html(c).Css("display","none").elm; var elm = wt.$C(this.telm).appendTo(this.titles[0].parentNode).Html(t).Class(this.Link).Attr("contact",c); this.addEvent(elm); this.Reset(); var ico = wt.$C("div").insertBefore(this.titles[this.titles.length-1].childNodes[0]); ico.Class(this.icostyle).AddListener('mousedown',wt.BindAsEventListener(this,this.remove,[ico.elm.parentNode])); this.onadd(); }, remove : function(e,o){ wt.Bubble(e); if(this.titles.length == this.Min) return; wt.$$(o).$R(); wt.$$(o.contact).$R(); this.Reset(); this.change(this.titles[0]); }, Reset : function(){ this.contents = wt.$$(this.contents[0].parentNode,this.celm,1); this.titles = wt.$$(this.titles[0].parentNode,this.telm,1); }, drag : function(e,o){ this.ms = wt.BindAsEventListener(this,this.move,[o]); this.ss = wt.Bind(this,this.Stop); wt.$$(document.documentElement).AddListener('mousemove',this.ms).AddListener('mouseup',this.ss); this.isdrag = true; }, move : function(e,o){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var top = Sys.Chrome?document.body.scrollTop:document.documentElement.scrollTop; wt.$$(this.tip).Html(o.childNodes[1].nodeValue).Css({display:"block",top:(e.clientY+10+top+"px"),left:(e.clientX+8+"px")}); }, Stop : function(){ wt.$$(document.documentElement).RemoveListener('mousemove',this.ms).RemoveListener('mouseup',this.ss); wt.$$(this.tip).Css("display","none"); if(this.hoverobj) { wt.$$(this.ID).insertBefore(this.hoverobj); wt.$$(this.hoverobj).Class(this.Link); this.hoverobj = null; } this.isdrag = false; }, Hover : function(o){ if(!this.isdrag||o == this.ID) return; wt.$$(o).Class(this.hover); this.hoverobj = o; }, out : function(o){ if(!this.isdrag||o == this.ID) return; wt.$$(o).Class(this.Link); this.hoverobj = null; }, Key : function(e,o){ alert('a'); } }); //=============================================================================================================== var ss=null; window.onload = function(){ ss = new Tab(wt.$('t li',1),wt.$('c div',1),{isover:true,active:"active",hover:"hover"}); } function add(t,c){ ss.add(t,"<iframe style='margin:10px;border:1px dashed #CCCCCC; width:98%; height:96%' frameborder='0' src='"+c+"'></iframe>"); } </script> </body> </html>