您当前位置：首页 > web前端 > jscript > JavaScript自定义多级联动浮动菜单[一]

JavaScript自定义多级联动浮动菜单[一]

来源：程序员人生发布时间：2013-10-26 11:29:17 阅读次数：3442次

　　网教程类似的多级浮动菜单网上也很多实例，但大部分都是只针对一种情况或不够灵活，简单说就是做死了的。所以我就想到做一个能够自定义菜单的，有更多功能的多级浮动菜单。而其中的关键就是怎么根据自定义的菜单结构来生成新菜单，关键中的难点就是怎么得到下级菜单结构和容器对象的使用。

　　理想的做法是每次有下级菜单时，从对象直接取得下级菜单结构，放到容器对象中，并且容器能重用，而不是每次都重新生成。但想了很久也想不到适合的做法，直到做了多级联动下拉菜单终于得到了灵感。放弃了直接取得下级菜单结构，而是每次都从原来的菜单结构中获取当前需要的下级菜单结构。容器对象也不是自动生成，而是由用户先定义好（后来也做到能自动生成了）。

　　先来看一下演示：

<!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.wfuyu.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.wfuyu.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关注

栏目热点