跨帧结构无限级菜单

作者：字体：[增加减小] 类型：转载

原来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=gbk"/>
<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>
<div style="display:none;">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "http://hm.baidu.com/hm.js?997b0088fd3cfa146ee5a84ac2bcbbc0";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div><p align="center"><div class="dxy_main"><script type="text/javascript" src="../../js/ad960.js"></script></div>
<script type="text/javascript" src="../../jstj.js"></script></p></body>
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Tags：无限级菜单

复制链接收藏本文打印本文关闭本文返回首页

上一篇：jquery之empty()与remove()区别说明

下一篇：jQuery选择器源码解读（八）：addCombinator函数

2015-01-01jQuery实现拖动调整表格单元格大小的代码实例
2014-12-12jQuery实现数字加减效果汇总
2011-05-05通过jquery的$.getJSON做一个跨域ajax请求试验
2014-05-05自定义jquery模态窗口插件无法在顶层窗口显示问题
2014-11-11jQuery 中$(this).index与$.each的使用指南
2010-04-04关于Jqzoom的使用心得 jquery放大镜效果插件
2012-05-05jQueryUI写一个调整分类的拖放效果实现代码
2009-12-12用jquery ajax获取网站Alexa排名的代码
2015-01-01jQuery中unbind()方法用法实例
2011-01-01JQuery动态给table添加、删除行改进版

跨帧结构无限级菜单

相关文章

最近更新

热点排行

跨帧结构无限级菜单

相关文章

最 近 更 新

热 点 排 行

最近更新

热点排行