javascript 無限聯(lián)動(dòng)菜單效果代碼

更新時(shí)間：2010年04月11日 20:13:43 作者：

javascript 無限聯(lián)動(dòng)菜單效果代碼，需要的朋友可以參考下。

<!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>Selects</title> <style type="text/css"> *{font-size:14px;} select{height:20px;font-size:12px;} </style> </head> <body > <div style='color:red'>2級(jí)聯(lián)動(dòng)</div> <div   class="zdjddtv"   id='demo1'></div> <div style='color:red'>3級(jí)聯(lián)動(dòng)</div> <div   class="btxv333"   id='demo2'></div> <div style='color:red'>4級(jí)聯(lián)動(dòng)</div> <div   class="b3fnrtp"   id='demo3'></div> <div style='color:red'>5級(jí)聯(lián)動(dòng)</div> <div   class="rl3vrjd"   id='demo4'></div> <script language="javascript"> var Sys = (function(ua){ var s = {}; s.IE = ua.match(/msie ([\d.]+)/)?true:false; s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false; s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; return s; })(navigator.userAgent.toLowerCase()); Sys.IE6&&document.execCommand("BackgroundImageCache", false, true); function $(Id){ return document.getElementById(Id); }; function $$(p,e){ return p.getElementsByTagName(e); }; function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); }; function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn); }; var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args); }; }; var BindAsEventListener = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function(event) { return fun.apply(object, [event || window.event].concat(args)); }; }; var Extend = function(destination, source){ for (var property in source) { destination[property] = source[property]; }; }; var Class = function(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 Selects = new Class({ initialize :function(container,data,title){ this.container = container; this.num = title.length; this.Events = new Array(title.length-1); var i,l,select; for(i=0; i<this.num ; i++) { container.innerHTML = container.innerHTML + "　" + title[i]; container.appendChild(document.createElement('select')); } select = $$(container,'select')[0]; for(i=0,l=data.length;i<l;i++) select.options.add(new Option(data[i].txt,i)); addListener(select,'change',Bind(this,this.Change,select,data,0)); this.Change(select,data,0); }, Change : function(obj,data,num){ if(num == this.num-1)return; var menu = data[obj.value].menu; select = $$(this.container,'select')[num+1]; select.length = 0; if(!menu)return; if(this.Events[num]!=undefined)removeListener(select,'change',this.Events[num]) this.Events[num] = Bind(this,this.Change,select,menu,num+1) addListener(select,'change',this.Events[num]); for(var i=0,l=menu.length;i<l;i++) select.options.add(new Option(menu[i].txt,i)); this.Change(select,menu,num+1); } }); //========================================================================================================================== window.onload = function(){ var data=[{"txt":"人族","menu":[{"txt":"大法師","menu":[{"txt":"大法技能","menu":[{"txt":"水元素","menu":[{"txt":"召喚物"},{"txt":"穿刺攻擊"},{"txt":"很好東西"}]},{"txt":"暴風(fēng)雪","menu":[{"txt":"魔法攻擊"},{"txt":"面積傷害"},{"txt":"很漂亮"},{"txt":"可被打斷"}]},{"txt":"輝煌光環(huán)"},{"txt":"瞬間移動(dòng)"}]},{"txt":"英雄說明","menu":[{"txt":"智力英雄"},{"txt":"強(qiáng)大光環(huán)"},{"txt":"輔助型"},]}]},{"txt":"山丘之王","menu":[{"txt":"山丘技能","menu":[{"txt":"風(fēng)暴之錘"},{"txt":"錐地"},{"txt":"錐暈"},{"txt":"天神下凡"}]},{"txt":"英雄說明","menu":[{"txt":"力量英雄"},{"txt":"秒殺能力"},{"txt":"個(gè)子很矮"},{"txt":"大技變態(tài)"}]}]},{"txt":"圣騎士","menu":[{"txt":"圣騎技能","menu":[{"txt":"光"},{"txt":"無敵"},{"txt":"光環(huán)"},{"txt":"復(fù)活"}]},{"txt":"英雄說明","menu":[{"txt":"力量英雄"},{"txt":"輔助英雄"},{"txt":"人稱奶媽"}]}]},{"txt":"血法師","menu":[{"txt":"血法技能","menu":[{"txt":"火焰"},{"txt":"吸藍(lán)"},{"txt":"虛無"},{"txt":"神鳥鳳凰"}]},{"txt":"英雄說明","menu":[{"txt":"智力英雄"},{"txt":"輔助英雄"},{"txt":"長的很帥"}]}]}]},{"txt":"獸族","menu":[{"txt":"賤圣","menu":[{"txt":"賤圣技能","menu":[{"txt":"疾風(fēng)步"},{"txt":"影分身"},{"txt":"致命一擊"},{"txt":"劍刃風(fēng)暴"}]},{"txt":"英雄說明","menu":[{"txt":"敏捷英雄"},{"txt":"高攻英雄"},{"txt":"殺人越貨"},{"txt":"猥褻無敵"},{"txt":"非常強(qiáng)大"}]}]},{"txt":"先知男","menu":[{"txt":"先知技能","menu":[{"txt":"狼"},{"txt":"日"},{"txt":"閃電鏈"},{"txt":"地震"}]},{"txt":"英雄說明","menu":[{"txt":"智力英雄"},{"txt":"騷擾英雄"}]}]},{"txt":"牛頭人酋長","menu":[{"txt":"牛頭技能","menu":[{"txt":"沖擊波"},{"txt":"陣地"},{"txt":"耐久光環(huán)"},{"txt":"復(fù)活"}]},{"txt":"英雄說明","menu":[{"txt":"力量英雄"},{"txt":"魔法強(qiáng)大"},{"txt":"長的威猛"},{"txt":"一個(gè)肉盾"}]}]},{"txt":"小YY","menu":[{"txt":"小Y技能","menu":[{"txt":"變動(dòng)物"},{"txt":"治療波"},{"txt":"小蛇棒子"},{"txt":"全體無敵"}]},{"txt":"英雄說明","menu":[{"txt":"敏捷英雄"},{"txt":"魔法強(qiáng)大"},{"txt":"輔助英雄"}]}]}]},{"txt":"不死族","menu":[{"txt":"死亡騎士","menu":[{"txt":"亡騎技能","menu":[{txt:"大便一拓"},{txt:"邪惡光環(huán)"},{txt:"死亡契約"},{txt:"復(fù)活亡靈"}]},{"txt":"英雄說明","menu":[{txt:"騎的是羊"},{txt:"未老先衰"},{txt:"冰霜之哀"},{txt:"啊而塞思"}]}]},{"txt":"巫妖","menu":[{"txt":"巫妖技能","menu":[{txt:"暴冰"},{txt:"冰甲"},{txt:"契約"},{txt:"死亡凋零"}]},{"txt":"英雄說明","menu":[{txt:"穿裙子"},{txt:"全是骨頭"},{txt:"不男不女"}]}]},{"txt":"恐懼魔王","menu":[{"txt":"魔王技能"},{"txt":"英雄說明"}]},{"txt":"小強(qiáng)王子","menu":[{"txt":"王子技能"},{"txt":"英雄說明"}]}]}]; new Selects($('demo1'),data,["種族","英雄"]); new Selects($('demo2'),data,["種族","英雄","介紹"]); new Selects($('demo3'),data,["種族","英雄","介紹","技能"]); new Selects($('demo4'),data,["種族","英雄","介紹","技能","技能說明"]); } </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: