一个选项卡效果

本是古典何须时尚 2022-08-03 11:39 156阅读 0赞

支持拖动

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

<!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.csdn.net/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.csdn.net/app\_uploads/wtcsy/20091026/100748763.p.gif); color:\#FFFFFF; \} \#t li.active \{ background-image:url(http://album.hi.csdn.net/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.csdn.net/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.csdn.net/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.csdn.net/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>