跨帧结构无限级菜单

更新时间：2010年09月10日 14:51:15 作者：

原来ie对默认对弹出窗口有会限制他的大小和位置所以这就是为什么本地和博客园上看到会不一样的原因了

解释地址
写点东西不容易啊真的就这么杯具了杯具啊

<!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{margin:0px; padding:0px; font-size:12px;} *{margin:0; padding:0;} .de{ background-image:url(http://paui.52done.cn/demos/menu/images/nav_bg.gif);} #demo1{list-style:none; height:26px; cursor:pointer; background-image:url(http://paui.52done.cn/demos/menu/images/nav_bg.gif); color:#FFFFFF; margin-left:20px;} #demo1 li{float:left; height:25px; line-height:25px; padding:0 15px; margin-top:1px;} #demo1 li.focus{ color:#FE6100; background-color:#fcfcfc;} </style> </head> <body> <div class="de"> <ul id='demo1'> <li>人族</li> <li>兽族</li> <li>不死族</li> </ul> </div> <script type="text/javascript"> (function(window,undefined){ window.Sys = function (ua){ var b = { ie: /msie/.test(ua) && !/opera/.test(ua), opera: /opera/.test(ua), safari: /webkit/.test(ua) && !/chrome/.test(ua), firefox: /firefox/.test(ua), chrome: /chrome/.test(ua) },vMark = ""; for (var i in b) { if (b[i]) { vMark = "safari" == i ? "version" : i; break; } } b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0"; b.ie6 = b.ie && parseInt(b.version, 10) == 6; b.ie7 = b.ie && parseInt(b.version, 10) == 7; b.ie8 = b.ie && parseInt(b.version, 10) == 8; return b; }(window.navigator.userAgent.toLowerCase()); window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true); window.$ = function(Id){ return document.getElementById(Id); }; window.addListener = function(element,e,fn){ !element.events&&(element.events = {}); element.events[e]&&(element.events[e][addListener.guid++]=fn)||(element.events[e] = {'0':fn}); element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); }; window.addListener.guid = 1; window.removeListener = function(element,e,fn){ var handlers = element.events[e],type; if(fn){ for(type in handlers) if(handlers[type]===fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn); delete handlers[type]; } }else{ for(type in handlers){ element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]); delete handlers[type]; } } }; window.setStyle = function(elems, style, value){ if( !elems.length ) elems = [elems]; if( typeof style == "string"){ style = value === undefined?{cssText:style}:(function(o){ return (o[style] = value,o); })({}); }; each(elems,function(i,elem,style){ var value,name,ie=Sys.ie ; for(name in style){ value = style[name]; if (name === "opacity" && ie) { elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha$[^)]*$/, "" ) + "alpha(opacity=" + value * 100 + ")"; }else if(name === "float"){ elem.style[ ie ? "styleFloat" : "cssFloat" ] = value; }else{ name = name.replace(/-([a-z])/ig, function(all, letter){ return letter.toUpperCase(); }); elem.style[name] = value; } } },style); }; var slice = Array.prototype.slice; window.Bind = function(object, fun) { var args = slice.call(arguments).slice(2); return function() { return fun.apply(object, args); }; }; window.BindAsEventListener = function(object, fun,args) { var args = slice.call(arguments).slice(2); return function(event) { return fun.apply(object, [event || window.event].concat(args)); } }; //copy from jQ window.extend = function(){ var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options; if ( typeof target === "boolean" ) { deep = target; target = arguments[1] || {}; i = 2; } if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]") target = {}; for(;i<length;i++){ if ( (options = arguments[ i ]) != null ) for(var name in options){ var src = target[ name ], copy = options[ name ]; if ( target === copy ) continue; if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); } else if(copy !== undefined) target[ name ] = copy; } } return target; }; //copy from jQ window.each = function ( object, callback, args ) { var name, i = 0, length = object.length; if ( args ) { args = Array.prototype.slice.call(arguments).slice(2); if ( length === undefined ) { for ( name in object ) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) break; } else for ( ; i < length; i++) if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // break; } else { if ( length === undefined ) { for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; } else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} } return object; }; window.currentStyle = function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); }; window.objPos = function(elem){ var left = 0, top = 0, right = 0, bottom = 0,doc = elem ? elem.ownerDocument : document; if ( !elem.getBoundingClientRect || window.Sys.ie8 ) { var n = elem; while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; }; right = left + elem.offsetWidth; bottom = top + elem.offsetHeight; } else { var rect = elem.getBoundingClientRect(); left = right = doc.documentElement.scrollLeft || doc.body.scrollLeft; top = bottom = doc.documentElement.scrollLeft || doc.body.scrollLeft; left += rect.left; right += rect.right; top += rect.top; bottom += rect.bottom; } return { "left": left, "top": top, "right": right, "bottom": bottom }; }; window.hasClass = function(element, className){ return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)')); }; window.addClass = function(element, className){ !window.hasClass(element, className)&&(element.className += " "+className); }; window.removeClass = function(element, className){ window.hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ')); } })(window); //---------------------------------------------------------------------------------------------- var menu = { //定时器 time : null, //判断是那种类型的菜单 横的(y)还是纵的(x) type : null, //一个集合 记录那些popup list : [], // 延迟消失的时间 t : 300, foucsLi :[], //ul li的样式 因为popup里面是取不到本页面上样式的 只能每次创建ppopup的是添加样式 style : { ul : 'width:140px;margin:0px;padding:0;px; list-style:none;cursor:pointer;font-size:12px; border:1px solid #FFB26e;', li : 'height:22px;line-height:22px;padding:0 10px; margin:0px;background-color:#fcfcfc;cursor:pointer;', focus : 'background-color:FE6100;color:#ffffff' }, init : function(ul,data){ this.ul = ul; this.isOver = false; //给每个li做上标识 在后面去数据用的 each(ul.getElementsByTagName('li'),function(i,li){ li.setAttribute('pa_ui_num',i); }); addListener(ul,'mouseover',BindAsEventListener(this,this.openPopup,ul,document,data)); addListener(ul,'mouseout',BindAsEventListener(this,this.hidea,ul)); }, openPopup : function(e,ul,doc,data){ this.clear(); //第一出发 和之后的子菜单出发有些情况是不一样的处理方式 this.ul===ul是第一次出发使用 this.ul===ul?(this.isOver=true):(this.findul(ul).obj.is=true); var li = e.srcElement,popup = ul.popup?ul.popup:ul.popup=doc.parentWindow.createPopup(); //利用冒泡原理 这样只需要给外层元素ul绑定一个事件就行了 if(li.nodeName.toLowerCase()==='li'){ each(ul.getElementsByTagName('li'),function(i,elem){ removeClass(elem,'focus'); }); addClass(li,'focus'); //变过样式的li添加到this.foucsLi中 //this.foucsLi.push(li); var num =li.getAttribute('pa_ui_num'),cDoc =popup.document,str = ''; //下面5行都是取数据 if(this.ul!=ul&&data[num].menu===undefined){ popup.hide(); return; } data = this.ul===ul?data[num]:data[num].menu; // 下面一段都是生成li和ul each(data,function(i,menu){ str = str +"<li pa_ui_num="+i+" pa_ui_menuie_url='"+menu.url+"'>"+menu.txt+"</li>"; }); var cul = cDoc.getElementsByTagName('ul')[0]; //第一次的时候生成ul 之后就一直用之前的ul if(cul){ cul.innerHTML = str; //为什么要删除事件了 因为一只都是用的 一个popup 但是参数不同 所以只要删除后重新绑定 来跟新数据 removeListener(cul,'mouseover'); removeListener(cul,'mouseout'); removeListener(cul,'click'); }else{ //一样要添加样式 本页面的样式是去不到的 因为popup本身也相当于一个页面 var style=cDoc.createStyleSheet(); style.addRule('ul',this.style.ul); style.addRule('ul li',this.style.li); style.addRule('ul li.focus',this.style.focus); cDoc.body.innerHTML = "<ul>"+str+"</ul>"; cul = cDoc.getElementsByTagName('ul')[0]; } popup&&popup.hide(); //显示的位置和大小 if(this.ul===ul){ var ret = objPos(li); popup.show(ret.left+1,ret.top+li.offsetHeight,140,data.length*22+2,cDoc.body); }else{ popup.show(140-2,22*num,140,data.length*22+2,cDoc.body); } //把显示出来的 popup放到this.list中 如果已经添加了 就不要重复添加了 this.findul(cul)?(this.findul(cul).obj.is=false):this.list.push({ul:cul,is:false}); addListener(cul,'mouseover',BindAsEventListener(this,this.openPopup,cul,cDoc,data)); addListener(cul,'click',BindAsEventListener(this,this.reUrl)); addListener(cul,'mouseout',BindAsEventListener(this,this.hidea,this.ul,cul)); } }, reUrl : function(e){ if(e.srcElement.nodeName.toLowerCase() ==='li') alert(e.srcElement.getAttribute('pa_ui_menuie_url')) }, clear : function(){ clearTimeout(this.time); this.time = null; }, hidea : function(e,ul,cul){ var li = e.srcElement,self=this,callback=this.findul(cul||''); if(!cul){ this.isOver = false; this.list.length>0&&this.list[0].is===true?this.foucsLi.push(li):removeClass(li,'focus'); }else{ var i=callback.id+1,l=this.list.length,p=false; for(;i<l;i++){ if(this.list[i].is===true)p=true } callback.obj.is = false; p?this.foucsLi.push(li):removeClass(li,'focus'); } if(this.time!= null)return; //之所以不用之前那个 this.findul(cul||'') 是因为修改状态在那个后面 if(this.findul(cul||'').is||this.isOver===true)return; this.time = setTimeout(function(){ var p=false each(self.list,function(i,o){ if(o.is===true)p=true }); if(p)return each(self.foucsLi,function(i,o){ removeClass(o,'focus'); }); ul.popup.hide(); },this.t); }, findul : function(ul){ //在this.list中寻找ul //p代表是否找到 n代表索引 is代表是不是全部不选中状态 var p = false,n,is=false; each(this.list,function(i,o){ o.is===true&&(is=true); if(ul===o.ul){ p = true; n=i; }; }); return p?{obj:this.list[n],id:n,is:is}:false; } }; window.onload = function(){ var data1 = [ [{url:"http://www.baidu.com","txt":"大法师","menu":[{url:"http: //www.baidu.com","txt":"大法技能","menu":[{url:"http: //www.baidu.com","txt":"水元素","menu": [{url:"http://www.baidu.com","txt":"召唤物"},{url:"http: //www.baidu.com","txt":"穿刺攻击"},{url:"http://www.baidu.com","txt":"很好东西"}]},{url:"http://www.baidu.com","txt":"暴风雪","menu": [{url:"http://www.baidu.com","txt":"魔法攻击"},{url:"http: //www.baidu.com","txt":"面积伤害"},{url:"http://www.baidu.com","txt":"很漂亮"}, {url:"http://www.baidu.com","txt":"可被打断"}]},{url:"http: //www.baidu.com","txt":"辉煌光环"},{url:"http://www.baidu.com","txt":"瞬间移动"}]},{url:"http://www.baidu.com","txt":"英雄说明","menu":[{url:"http: //www.baidu.com","txt":"智力英雄"},{url:"http://www.baidu.com","txt":"强大光环"},{url:"http://www.baidu.com","txt":"辅助型"}]}]},{url:"http: //www.baidu.com","txt":"山丘之王","menu":[{url:"http: //www.baidu.com","txt":"山丘技能","menu": [{url:"http://www.baidu.com","txt":"风暴之锤"},{url:"http: //www.baidu.com","txt":"锥地"},{url:"http://www.baidu.com","txt":"锥晕"}, {url:"http://www.baidu.com","txt":"天神下凡"}]},{url:"http: //www.baidu.com","txt":"英雄说明","menu":[{url:"http: //www.baidu.com","txt":"力量英雄"},{url:"http://www.baidu.com","txt":"秒杀能力"},{url:"http://www.baidu.com","txt":"个子很矮"},{url:"http: //www.baidu.com","txt":"大技变态"}]}]},{url:"http://www.baidu.com","txt":"圣骑士","menu":[{url:"http://www.baidu.com","txt":"圣骑技能","menu":[{url:"http: //www.baidu.com","txt":"光"},{url:"http://www.baidu.com","txt":"无敌"}, {url:"http://www.baidu.com","txt":"光环"},{url:"http: //www.baidu.com","txt":"复活"}]},{url:"http://www.baidu.com","txt":"英雄说明","menu":[{url:"http://www.baidu.com","txt":"力量英雄"}, {url:"http://www.baidu.com","txt":"辅助英雄"},{url:"http: //www.baidu.com","txt":"人称奶妈"}]}]},{url:"http://www.baidu.com","txt":"血法师","menu":[{url:"http://www.baidu.com","txt":"血法技能","menu":[{url:"http: //www.baidu.com","txt":"火焰"},{url:"http://www.baidu.com","txt":"吸蓝"}, {url:"http://www.baidu.com","txt":"虚无"},{url:"http: //www.baidu.com","txt":"神鸟凤凰"}]}, {url:"http://www.baidu.com","txt":"英雄说明","menu":[{url:"http: //www.baidu.com","txt":"智力英雄"},{url:"http://www.baidu.com","txt":"辅助英雄"},{url:"http://www.baidu.com","txt":"长的很帅"}]}]}], [{url:"http://www.baidu.com","txt":"贱圣","menu":[{url:"http: //www.baidu.com","txt":"贱圣技能","menu":[{url:"http: //www.baidu.com","txt":"疾风步"},{url:"http://www.baidu.com","txt":"影分身"}, {url:"http://www.baidu.com","txt":"致命一击"},{url:"http: //www.baidu.com","txt":"剑刃风暴"}]},{url:"http://www.baidu.com","txt":"英雄说明","menu":[{url:"http://www.baidu.com","txt":"敏捷英雄"}, {url:"http://www.baidu.com","txt":"高攻英雄"},{url:"http: //www.baidu.com","txt":"杀人越货"},{url:"http://www.baidu.com","txt":"猥亵无敌"},{url:"http://www.baidu.com","txt":"非常强大"}]}]},{url:"http: //www.baidu.com","txt":" 先知男","menu":[{url:"http://www.baidu.com","txt":"先知技能","menu": [{url:"http://www.baidu.com","txt":"狼"},{url:"http: //www.baidu.com","txt":"日"},{url:"http://www.baidu.com","txt":"闪电链"}, {url:"http://www.baidu.com","txt":"地震"}]},{url:"http: //www.baidu.com","txt":"英雄说明","menu":[{url:"http: //www.baidu.com","txt":"智力英雄"},{url:"http://www.baidu.com","txt":"骚扰英雄"}]}]},{url:"http://www.baidu.com","txt":"牛头人酋长","menu":[{url:"http: //www.baidu.com","txt":"牛头技能","menu":[{url:"http: //www.baidu.com","txt":"冲击波"}, {url:"http://www.baidu.com","txt":"阵地"},{url:"http: //www.baidu.com","txt":"耐久光环"},{url:"http://www.baidu.com","txt":"复活"}]},{url:"http://www.baidu.com","txt":"英雄说明","menu": [{url:"http://www.baidu.com","txt":"力量英雄"},{url:"http: //www.baidu.com","txt":"魔法强大"},{url:"http://www.baidu.com","txt":"长的威猛"},{url:"http://www.baidu.com","txt":"一个肉盾"}]}]}, {url:"http://www.baidu.com","txt":"小YY","menu":[{url:"http: //www.baidu.com","txt":"小Y技能","menu":[{url:"http: //www.baidu.com","txt":"变动物"},{url:"http://www.baidu.com","txt":"治疗波"}, {url:"http://www.baidu.com","txt":"小蛇棒子"},{url:"http: //www.baidu.com","txt":"全体无敌"}]},{url:"http://www.baidu.com","txt":"英雄说明","menu":[{url:"http://www.baidu.com","txt":"敏捷英雄"}, {url:"http://www.baidu.com","txt":"魔法强大"},{url:"http: //www.baidu.com","txt":"辅助英雄"}]}]}], [{url:"http://www.baidu.com","txt":"死亡骑士","menu":[{url:"http: //www.baidu.com","txt":"亡骑技能","menu":[{url:"http://www.baidu.com",txt:"大便一拓"},{url:"http://www.baidu.com",txt:"邪恶光环"}, {url:"http://www.baidu.com",txt:"死亡契约"},{url:"http: //www.baidu.com",txt:"复活亡灵"}]},{url:"http://www.baidu.com","txt":"英雄说明","menu":[{url:"http://www.baidu.com",txt:"骑的是羊"},{url:"http: //www.baidu.com",txt:"未老先衰"},{url:"http://www.baidu.com",txt:"冰霜之哀"}, {url:"http://www.baidu.com",txt:"啊而塞思"}]}]},{url:"http: //www.baidu.com","txt":"巫妖","menu":[{url:"http://www.baidu.com","txt":"巫妖技能","menu":[{url:"http://www.baidu.com",txt:"暴冰"},{url:"http: //www.baidu.com",txt:"冰甲"},{url:"http://www.baidu.com",txt:"契约"}, {url:"http://www.baidu.com",txt:"死亡凋零"}]},{url:"http: //www.baidu.com","txt":"英雄说明","menu":[{url:"http://www.baidu.com",txt:"穿裙子"},{url:"http://www.baidu.com",txt:"全是骨头"},{url:"http: //www.baidu.com",txt:"不男不女"}]}]},{url:"http://www.baidu.com","txt":"恐惧魔王","menu":[{url:"http://www.baidu.com","txt":"魔王技能"},{url:"http: //www.baidu.com","txt":"英雄说明"}]},{url:"http://www.baidu.com","txt":"小强王子","menu": [{url:"http://www.baidu.com","txt":"王子技能"},{url:"http: //www.baidu.com","txt":"英雄说明"}]}] ]; menu.init($('demo1'),data1); }; </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

无限级菜单

jQuery中:contains选择器用法实例
这篇文章主要介绍了jQuery中:contains选择器用法,以实例形式分析了:contains选择器的功能、定义及匹配给定元素文本时的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2014-12-12
jQuery实现的网页左侧在线客服效果代码
这篇文章主要介绍了jQuery实现的网页左侧在线客服效果代码,涉及简单的jQuery页面动画显示与隐藏效果实现技巧,非常具有实用价值,需要的朋友可以参考下
2015-10-10
如何解决谷歌浏览器下jquery无法获取图片的尺寸
本章节介绍一下在谷歌浏览器下利用jquery无法获取图片尺寸的现象，而在IE和火狐浏览器下能够正常获得，当然也不是任何时候都无法获取图片尺寸，下面给大家介绍遇到此问题该如何解决
2015-09-09
jquery检测上传文件大小示例
这篇文章主要介绍了jquery检测上传文件大小,结合完整示例形式分析了jquery针对上传文件大小检测与计算相关操作技巧,需要的朋友可以参考下
2020-04-04
jQuery关于导航条背景切换效果实现示例
导航条背景切换的效果，想必大家在浏览网页时可能会碰到过，下面为大家介绍下使用jquery如何实现，具体思路及代码如下，感兴趣的朋友可以参考下
2013-09-09
以WordPress为例讲解jQuery美化页面Title的方法
鼠标移动到超链接时显示Title提示即是所谓Title美化的一般手段,这里我们就以WordPress为例讲解jQuery美化页面Title的方法,需要的朋友可以参考下
2016-05-05
jQuery EasyUI ProgressBar进度条组件
这篇文章主要为大家详细介绍了jQuery EasyUI ProgressBar进度条组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
Jquery知识点三 jquery表单对象操作
Jquery中的val(),text(),html()是对javascrip中的value、innerText、innerHtml三个属性的封装
2011-01-01
jquery下实现overlay遮罩层代码
下面是个应用的小例子用来统一处理ajax请求中利用完全透明遮罩层组织用户和界面元素交换，当ajax出错时提示用户
2010-08-08
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
我将上一章中了插件做了个小小的升级，实现了自动运行效果，完整代码大家见demo
2012-08-08

跨帧结构无限级菜单

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具