您當(dāng)前位置：首頁(yè) > web前端 > jscript > JavaScript自定義多級(jí)聯(lián)動(dòng)浮動(dòng)菜單[一]

JavaScript自定義多級(jí)聯(lián)動(dòng)浮動(dòng)菜單[一]

來(lái)源：程序員人生發(fā)布時(shí)間：2013-10-26 11:29:17 閱讀次數(shù)：3616次

　　網(wǎng)教程類似的多級(jí)浮動(dòng)菜單網(wǎng)上也很多實(shí)例，但大部分都是只針對(duì)一種情況或不夠靈活，簡(jiǎn)單說(shuō)就是做死了的。所以我就想到做一個(gè)能夠自定義菜單的，有更多功能的多級(jí)浮動(dòng)菜單。而其中的關(guān)鍵就是怎么根據(jù)自定義的菜單結(jié)構(gòu)來(lái)生成新菜單，關(guān)鍵中的難點(diǎn)就是怎么得到下級(jí)菜單結(jié)構(gòu)和容器對(duì)象的使用。

　　理想的做法是每次有下級(jí)菜單時(shí)，從對(duì)象直接取得下級(jí)菜單結(jié)構(gòu)，放到容器對(duì)象中，并且容器能重用，而不是每次都重新生成。但想了很久也想不到適合的做法，直到做了多級(jí)聯(lián)動(dòng)下拉菜單終于得到了靈感。放棄了直接取得下級(jí)菜單結(jié)構(gòu)，而是每次都從原來(lái)的菜單結(jié)構(gòu)中獲取當(dāng)前需要的下級(jí)菜單結(jié)構(gòu)。容器對(duì)象也不是自動(dòng)生成，而是由用戶先定義好（后來(lái)也做到能自動(dòng)生成了）。

　　先來(lái)看一下演示：

<!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><FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JavaScript 自定義多級(jí)聯(lián)動(dòng)浮動(dòng)菜單_網(wǎng)liehuo.net</title><script type="text/javascript">var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id;};function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; }};function Event(e){ var oEvent = document.all ? window.event : e; if (document.all) { if(oEvent.type == "mouseout") { oEvent.relatedTarget = oEvent.toElement; }else if(oEvent.type == "mouseover") { oEvent.relatedTarget = oEvent.fromElement; } oEvent.stopPropagation = function() { this.cancelBubble = true; } } return oEvent;}function Each(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }};var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } }}Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination;}var CascadeMenu = Class.create();CascadeMenu.prototype = { //初始化對(duì)象(容器集合, 菜單結(jié)構(gòu)) initialize: function(arrContainer, arrMenu, options) { if(arrContainer.length <= 0 || arrMenu.lenght <= 0) return; var oThis = this; this._timerContainer = null;//容器定時(shí)器 this._timerMenu = null;//菜單定時(shí)器 this._onmenu = null;//當(dāng)前菜單對(duì)象 this._index = -1;//要設(shè)置容器的索引 this.Container = [];//容器集合　文章來(lái)自：網(wǎng)　www.vxbq.cn this._menu = arrMenu;//菜單結(jié)構(gòu) this.SetOptions(options); this.Position = this.options.Position || "right"; this.Delay = parseInt(this.options.Delay) || 0; this.Class = this.options.Class || ""; this.onClass = this.options.onClass || this.Class; this.Tag = this.options.Tag; //設(shè)置容器 Each(arrContainer, function(o, i){ oThis.IniContainer(oThis.Container[i] = (o = $(o)), i > 0); }); this.Ini(); }, //設(shè)置默認(rèn)屬性 SetOptions: function(options) { this.options = {//默認(rèn)值 Position: "right",//默認(rèn)位置(up,down,left,right) Tag: "div",//默認(rèn)生成標(biāo)簽 Class: "",//默認(rèn)樣式 onClass: "",//焦點(diǎn)樣式 Delay: 0//延遲值(微秒) }; Object.extend(this.options, options || {}); }, //初始化容器(容器集合, 是否子菜單容器) IniContainer: function(container, bChild) { var oThis = this; addEventHandler(container, "mouseover", function(){ clearTimeout(oThis._timerContainer); }); addEventHandler(container, "mouseout", function(e){ //是否在菜單之內(nèi) var isIn = false, oT = Event(e).relatedTarget; Each(oThis.Container, function(o, i){ if(o.contains ? o.contains(oT) || o == oT : o.compareDocumentPosition(oT) & 16){ isIn = true; } }); //在菜單外隱藏 if(!isIn){ clearTimeout(oThis._timerContainer); clearTimeout(oThis._timerMenu); oThis._timerContainer = setTimeout(function(){ oThis.Hide(); }, oThis.Delay); } }); //重置索引 container.index = -1; //子菜單容器設(shè)置 if (bChild) { container.style.position = "absolute"; container.style.visibility = "hidden"; } }, //初始化第一個(gè)容器 Ini: function() { this.Container[0].innerHTML = ""; this._index = 0; this.SetMenu(this._menu); }, //全局設(shè)置 Set: function() { //隱藏select Each(document.getElementsByTagName("select"), function(o){ o.style.visibility = "hidden"; }) var menu = this._menu; //第一個(gè)不需要處理所以從1開始 var i = 1; while (menu.length > 0) { //獲取子菜單結(jié)構(gòu)和定位 var iC = this.Container[i-1].index, position = this.Position; if(iC >= 0){ //這里要先取position再設(shè)menu position = menu[iC].position || this.Position; menu = menu[iC].menu || []; } else { menu = []; } //如果容器不夠就根據(jù)前一個(gè)自動(dòng)添加 if(!this.Container[i]){ var oPre = this.Container[i-1], oNew = document.body.appendChild(document.createElement(oPre.tagName)); oNew.style.cssText = oPre.style.cssText; oNew.className = oPre.className; this.IniContainer(this.Container[i] = oNew, true); } //設(shè)置下一級(jí)菜單 if(this._index == i++){ this.SetContainer(menu, position); break; } } }, //容器設(shè)置(菜單結(jié)構(gòu), 位置) SetContainer: function(menu, position) { var oContainer = this.Container[this._index]; //設(shè)置容器 oContainer.innerHTML = ""; oContainer.index = -1; oContainer.style.visibility = "hidden"; if(menu.length > 0){ //設(shè)置菜單 this.SetMenu(menu); //容器定位 //offset取值會(huì)有偏差，要注意 var o = this._onmenu, iLeft = o.offsetLeft, iTop = o.offsetTop; //注意如果display為none的話取不到offset值，所以要用visibility switch (position.toLowerCase()) { case "up" : iTop -= oContainer.offsetHeight; break; case "down" : iTop += o.offsetHeight; break; case "left" : iLeft -= oContainer.offsetWidth; break; case "right" : default : iLeft += o.offsetWidth; } while (o.offsetParent) { o = o.offsetParent; iLeft += o.offsetLeft; iTop += o.offsetTop; } oContainer.style.left = iLeft + "px"; oContainer.style.top = iTop + "px"; oContainer.style.visibility = "visible"; } //隱藏不需要的容器 for(var i = this._index + 1, len = this.Container.length; i < len; i++){ this.Container[i].style.visibility = "hidden"; } }, //菜單設(shè)置(菜單結(jié)構(gòu)) SetMenu: function(menu) { var oThis = this, index = this._index, oContainer = this.Container[index]; Each(menu, function(o, i){ var oMenu = document.createElement(oThis.Tag); oMenu.innerHTML = o.txt; oMenu.onmouseover = function(){ clearTimeout(oThis._timerMenu); //重新設(shè)置菜單 oThis._timerMenu = setTimeout(function(){ oContainer.index = i; oThis._onmenu = oMenu; oThis._index = index + 1; oThis.Set(); }, oThis.Delay); //重新設(shè)置樣式 //為解決設(shè)置延時(shí)后樣式的問(wèn)題每次都全部重新設(shè)置 Each(oThis.Container, function(o, i){ if(i > index) return; Each(o.getElementsByTagName(oThis.Tag), function(o){ o.className = oThis.Class; }); if(i == index){ oMenu.className = oThis.onClass; } else if(o.index >= 0) { o.getElementsByTagName(oThis.Tag)[o.index].className = oThis.onClass; } else return; }); } oContainer.appendChild(oMenu); }); }, //隱藏菜單 Hide: function() { var oThis = this; //除第一個(gè)外隱藏 Each(this.Container, function(o, i){ if(i == 0){ Each(o.getElementsByTagName(oThis.Tag), function(o, i){ o.className = oThis.Class; }) } else { o.style.visibility = "hidden"; } o.index = -1; }); //顯示select Each(document.getElementsByTagName("select"), function(o){ o.style.visibility = "visible"; }) }, //添加菜單(一個(gè)菜單結(jié)構(gòu)) Add: function(arrMenu) { this._menu.push(arrMenu); this.Ini(); }, //刪除菜單 Delete: function(index) { if(index < 0 || index >= this._menu.length) return; for(var i = index, len = this._menu.length - 1; i < len; i++){ this._menu[i] = this._menu[i + 1]; } this._menu.pop(); this.Ini(); }};window.onload=function(){ var menu = [ {'txt': '1 my blog' }, {'txt': '2 →', 'menu': [ {'txt': '2_1'}, {'txt': '2_2'} ]}, {'txt': '3 →', 'menu': [ {'txt': '3_1 ↑', 'position': 'up', 'menu': [ {'txt': '3_1_1'}, {'txt': '3_1_2'} ]}, {'txt': '3_2'} ]}, {'txt': '4 →', 'menu': [ {'txt': '4_1 ↓', 'position': 'down', 'menu': [ {'txt': '4_1_1 →', 'menu': [ {'txt': '4_1_1_1'} ]} ]} ]}, {'txt': '5 →', 'menu': [ {'txt': '5_1 →', 'menu': [ {'txt': '5_1_1 ↓', 'position': 'down', 'menu': [ {'txt': '5_1_1_1 ←', 'position': 'left', 'menu': [ {'txt': '5_1_1_1_1'} ]} ]} ]} ]} ]; var container=["idMenu1"]; var cs = new CascadeMenu(container, menu, { Delay: 200, onClass: "on" }); ////////////////test2 var menu2 = [ {'txt': '1 ↓', 'position': 'down', 'menu': [ {'txt': '1_1'}, {'txt': '1_2'} ]}, {'txt': '2 ↓', 'position': 'down', 'menu': [ {'txt': '2_1'}, {'txt': '2_2 →', 'menu': [ {'txt': '2_2_1'}, {'txt': '2_2_2'} ]} ]}, {'txt': '3 ↓', 'position': 'down', 'menu': [ {'txt': '3_1 →', 'menu': [ {'txt': '3_1_1 →', 'menu': [ {'txt': '3_1_1_1'} ]} ]} ]} ]; var container2=["idMenu2", "idMenu2_1", "idMenu2_2", "idMenu2_3", "idMenu2_4", "idMenu2_5", "idMenu2_6"]; var cs2 = new CascadeMenu(container2, menu2, { Delay: 200, onClass: "on" }); $("btnA").onclick=function(){cs2.Delay=0;} $("btnD").onclick=function(){cs2.Delay=500;} $("btnB").onclick=function(){ cs2.Add( {'txt': '+ ↓', 'position': 'down', 'menu': [ {'txt': '+_1 ←', 'position': 'left', 'menu': [ {'txt': '+_1_1 ↓', 'position': 'down', 'menu': [ {'txt': '+_1_1_1 →', 'menu': [ {'txt': '+_1 ↓', 'position': 'down', 'menu': [ {'txt': '+_1_1_1 →', 'menu': [ {'txt': '★'} ]} ]} ]} ]} ]} ]} ) } $("btnC").onclick=function(){ cs2.Delete(1) }}</script><style type="text/css">.container {width:100px;}.container div {width:100px;background:#CCCCCC;line-height:30px;border:1px solid #000000;}.on {font-weight:bold;}.container2 {width:100px;text-align:center;}.container2 div {width:100px;line-height:30px;}.container2 a {text-decoration:none;display:block;border:1px solid #d4d4d3;background:#e6e6e6;color:#000000;}/*文章來(lái)自：網(wǎng)　www.vxbq.cn*/.container2 .on a {background:#ffebac;color:#982e00;border-color:#ffb200;}#idMenu2 {clear:both;width:auto;}#idMenu2 div {float:left;}#idMenu2_6 a {background-color:red;border-color:red;color:#ffb200;}</style></head><body><div id="idMenu1" class="container"></div><br /><br /><br /><div><input id="btnB" type="button" value="添加菜單" /><input id="btnC" type="button" value="減少菜單(第二個(gè))" /><input id="btnA" type="button" value="不延遲" /><input id="btnD" type="button" value="延遲500" /></div><br /><div id="idMenu2" class="container2"></div><div id="idMenu2_1" class="container2"></div><div id="idMenu2_2" class="container2"></div><div id="idMenu2_3" class="container2"></div><div id="idMenu2_4" class="container2"></div><div id="idMenu2_5" class="container2"></div><div id="idMenu2_6" class="container2"></div></body></html>
提示：可修改后代碼再運(yùn)行!

　　放下了這些包袱后，后面的開發(fā)就順暢了。

　　特點(diǎn)：
　　1.根據(jù)自定義菜單結(jié)構(gòu)生成菜單；
　　2.多級(jí)聯(lián)動(dòng)功能；
　　3.自定義浮動(dòng)位置（上下左右）；
　　4.自定義延遲效果；
　　5.js控制編輯菜單；
　　6.可根據(jù)需要自動(dòng)生產(chǎn)容器對(duì)象

　　程序原理

　　程序是根據(jù)傳統(tǒng)浮動(dòng)菜單擴(kuò)展而來(lái)，這里說(shuō)一下幾個(gè)比較關(guān)鍵或有用的地方：

　　【延時(shí)功能】

　　這個(gè)很多人都懂，就是設(shè)個(gè)setTimeout計(jì)時(shí)器，這里有兩個(gè)計(jì)時(shí)器，分別是容器計(jì)時(shí)器和菜單計(jì)時(shí)器。容器計(jì)時(shí)器的作用是鼠標(biāo)移到容器外面時(shí)隱藏容器，難點(diǎn)是如何判斷當(dāng)前鼠標(biāo)是不是在容器外面。一般的方法是設(shè)個(gè)bool參數(shù)，mouseout時(shí)設(shè)為false，mouseover時(shí)設(shè)為true（or倒過(guò)來(lái)），再根據(jù)這個(gè)參數(shù)判斷，但這個(gè)方法在這個(gè)不行，經(jīng)過(guò)容器里的菜單對(duì)象時(shí)會(huì)觸發(fā)容器mouseout，由于事件冒泡，菜單對(duì)象的mouseout也會(huì)觸發(fā)容器的mouseout。

　　這里推薦一個(gè)方法，使用contains(ff是compareDocumentPosition)方法。
　　這個(gè)方法是我做圖片滑動(dòng)展示效果時(shí)muxrwc教我的。

var isIn = false, oT = Event(e).relatedTarget;
Each(oThis.Container, function(o, i){ if(o.contains ? o.contains(oT) || o == oT : o.compareDocumentPosition(oT) & 16){ isIn = true; } });

　　詳細(xì)參考仿LightBox內(nèi)容顯示效果，而菜單計(jì)時(shí)器就沒(méi)什么特別，就是用來(lái)設(shè)置菜單內(nèi)容。

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 關(guān)鍵字排名不穩(wěn)定因素之外鏈分析

下一篇 SQL Server和Oracle中索引介紹

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

JavaScript自定義多級(jí)聯(lián)動(dòng)浮動(dòng)菜單[一]