您當前位置：首頁 > web前端 > jscript > JavaScript自定義多級聯動浮動菜單[一]

JavaScript自定義多級聯動浮動菜單[一]

來源：程序員人生發布時間：2013-10-26 11:29:17 閱讀次數：3621次

　　網教程類似的多級浮動菜單網上也很多實例，但大部分都是只針對一種情況或不夠靈活，簡單說就是做死了的。所以我就想到做一個能夠自定義菜單的，有更多功能的多級浮動菜單。而其中的關鍵就是怎么根據自定義的菜單結構來生成新菜單，關鍵中的難點就是怎么得到下級菜單結構和容器對象的使用。

　　理想的做法是每次有下級菜單時，從對象直接取得下級菜單結構，放到容器對象中，并且容器能重用，而不是每次都重新生成。但想了很久也想不到適合的做法，直到做了多級聯動下拉菜單終于得到了靈感。放棄了直接取得下級菜單結構，而是每次都從原來的菜單結構中獲取當前需要的下級菜單結構。容器對象也不是自動生成，而是由用戶先定義好（后來也做到能自動生成了）。

　　先來看一下演示：

<!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 自定義多級聯動浮動菜單_網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 = { //初始化對象(容器集合, 菜單結構) initialize: function(arrContainer, arrMenu, options) { if(arrContainer.length <= 0 || arrMenu.lenght <= 0) return; var oThis = this; this._timerContainer = null;//容器定時器 this._timerMenu = null;//菜單定時器 this._onmenu = null;//當前菜單對象 this._index = -1;//要設置容器的索引 this.Container = [];//容器集合　文章來自：網　www.jyygyx.com this._menu = arrMenu;//菜單結構 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; //設置容器 Each(arrContainer, function(o, i){ oThis.IniContainer(oThis.Container[i] = (o = $(o)), i > 0); }); this.Ini(); }, //設置默認屬性 SetOptions: function(options) { this.options = {//默認值 Position: "right",//默認位置(up,down,left,right) Tag: "div",//默認生成標簽 Class: "",//默認樣式 onClass: "",//焦點樣式 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){ //是否在菜單之內 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; //子菜單容器設置 if (bChild) { container.style.position = "absolute"; container.style.visibility = "hidden"; } }, //初始化第一個容器 Ini: function() { this.Container[0].innerHTML = ""; this._index = 0; this.SetMenu(this._menu); }, //全局設置 Set: function() { //隱藏select Each(document.getElementsByTagName("select"), function(o){ o.style.visibility = "hidden"; }) var menu = this._menu; //第一個不需要處理所以從1開始 var i = 1; while (menu.length > 0) { //獲取子菜單結構和定位 var iC = this.Container[i-1].index, position = this.Position; if(iC >= 0){ //這里要先取position再設menu position = menu[iC].position || this.Position; menu = menu[iC].menu || []; } else { menu = []; } //如果容器不夠就根據前一個自動添加 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); } //設置下一級菜單 if(this._index == i++){ this.SetContainer(menu, position); break; } } }, //容器設置(菜單結構, 位置) SetContainer: function(menu, position) { var oContainer = this.Container[this._index]; //設置容器 oContainer.innerHTML = ""; oContainer.index = -1; oContainer.style.visibility = "hidden"; if(menu.length > 0){ //設置菜單 this.SetMenu(menu); //容器定位 //offset取值會有偏差，要注意 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"; } }, //菜單設置(菜單結構) 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); //重新設置菜單 oThis._timerMenu = setTimeout(function(){ oContainer.index = i; oThis._onmenu = oMenu; oThis._index = index + 1; oThis.Set(); }, oThis.Delay); //重新設置樣式 //為解決設置延時后樣式的問題每次都全部重新設置 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; //除第一個外隱藏 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"; }) }, //添加菜單(一個菜單結構) 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;}/*文章來自：網　www.jyygyx.com*/.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="減少菜單(第二個)" /><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>
提示：可修改后代碼再運行!

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

　　特點：
　　1.根據自定義菜單結構生成菜單；
　　2.多級聯動功能；
　　3.自定義浮動位置（上下左右）；
　　4.自定義延遲效果；
　　5.js控制編輯菜單；
　　6.可根據需要自動生產容器對象

　　程序原理

　　程序是根據傳統浮動菜單擴展而來，這里說一下幾個比較關鍵或有用的地方：

　　【延時功能】

　　這個很多人都懂，就是設個setTimeout計時器，這里有兩個計時器，分別是容器計時器和菜單計時器。容器計時器的作用是鼠標移到容器外面時隱藏容器，難點是如何判斷當前鼠標是不是在容器外面。一般的方法是設個bool參數，mouseout時設為false，mouseover時設為true（or倒過來），再根據這個參數判斷，但這個方法在這個不行，經過容器里的菜單對象時會觸發容器mouseout，由于事件冒泡，菜單對象的mouseout也會觸發容器的mouseout。

　　這里推薦一個方法，使用contains(ff是compareDocumentPosition)方法。
　　這個方法是我做圖片滑動展示效果時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; } });

　　詳細參考仿LightBox內容顯示效果，而菜單計時器就沒什么特別，就是用來設置菜單內容。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

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

上一篇 關鍵字排名不穩定因素之外鏈分析

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

分享到:

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

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

JavaScript自定義多級聯動浮動菜單[一]