JAVASCRIPT 多级联动浮动(下拉)菜单.pdf

JavaScript 多级联动浮动(下拉)菜单 (第二版) 上一个版本 （第一版请看这里）基本实现了多级联动和浮动菜单的功能，但效果 不是太好，使用麻烦还有些bug，实用性不高。 这次除了修改已发现的问题外，还对程序做了大幅调整和改进，使程序实用性更 高，功能更强大。 效果预览 菜单使用演示： 自定义样式 下拉菜单 任意定位 位置： 仿京东商城商品分类菜单： 图片动画 图片效果 动画效果 系统其他 系统效果 其他效果 仿window xp右键菜单： 仿淘宝拼音索引菜单： Tag索引  Table  Fixed  Color  Date  Select 程序原理 程序最关键的地方是多级联动，先大概说明一下： 首先第一级的菜单元素整理好后，从他们开始，当某个菜单元素触发显示下级菜 单时， 准备好下一级的容器元素，并把下一级的菜单元素放进去，再定位并显示容器元 素。 里面的菜单元素又可以触发显示下级菜单，然后按上面的步骤执行下去。 这样一级一级的递推下去，形成多级的联动菜单。 程序说明 【容器对象】 在多级联动中，每一级都需要一个容器元素来存放菜单元素。 程序中每个容器元素都对应一个容器对象，用来记录该容器的相关信息。 容器对象的集合记录在程序的_containers属性中。 容器参数containers是程序实例化时的必要参数，它的结构如下： [ 容器元素(id), { id: 容器元素(id), menu: 插入菜单元素(id) }, ] 首先如果containers不是数组的话，程序会自动转成单元素数组。 如果菜单插入的元素就是容器元素本身，可以直接用容器元素(id)作为数组元 素。 否则应该使用一个对象结构，它包括一个id属性表示是容器元素(id)和一个 menu属性表示菜单插入的元素(id)。 containers会在程序初始化时这样处理： Code 主要是生成一个容器对象，其中pos属性是容器元素，menu属性是插入菜单的 元素。 然后传递索引和容器对象给_iniContainer函数，对容器对象做初始化。 在_iniContainer 中，首先用_resetContainer重置容器对象可能在程序中设置 过的属性。 再给容器元素添加事件： Code 在mouseout时，先判断是否容器内部或容器之间触发，不是的话再用定时器执 行hide隐藏函数。 在hide里面，主要是隐藏容器： this._forEachContainer(function(o, i){ if ( i 0 ) { this._resetCss(o); } else { this._hideContainer(o); }; }); 由于第一级容器一般是不自动隐藏的，只需要用_resetCss来重置样式。 其他容器会用_hideContainer函数来处理隐藏： $$D.setStyle( container.pos, { left: -9999px, top: -9999px, visibility: hidden } ); this._containers[container._index - 1]._active null; 其中_active属性是保存该容器触发下级菜单的菜单对象，在隐藏容器同时重置 上一级容器的_active。 在mouseover时清除容器定时器，其实就是取消hide执行。 之后是设置样式： if ( index ) { $$D.setStyle(container.pos, { position: absolute, display: block, margin: 0, zIndex: this._containers[index - 1].pos.style.zInd ex + 1 }); }; 除了第一级容器外，都设置浮动需要的样式。 最后用_index属性记录索引，方便调用，并把容器对象插入到容器集合中： container._index index; this._containers[i