国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > jscript > JavaScript自定义多级联动浮动菜单[一]

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

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

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

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

  先来看一下演示:


提示:可修改后代码再运行!

  放下了这些包袱后,后面的开发就顺畅了。

  特点:
  1.根据自定义菜单结构生成菜单;
  2.多级联动功能;
  3.自定义浮动位置(上下左右);
  4.自定义延迟效果;
  5.js控制编辑菜单;
  6.可根据需要自动生产容器对象

  程序原理

  程序是根据传统浮动菜单扩展而来,这里说一下几个比较关键或有用的地方:

  【延时功能】

  这个很多人都懂,就是设个setTimeout计时器,这里有两个计时器,分别是容器计时器和菜单计时器。容器计时器的作用是鼠标移到容器外面时隐藏容器,难点是如何判断当前鼠标是不是在容器外面。一般的方法是设个bool参数,mouseout时设为false,mouseover时设为true(or倒过来),再根据这个参数判断,但这个方法在这个不行,经过容器里的菜单对象时会触发容器mouseout,由于事件冒泡,菜单对象的mouseout也会触发容器的mouseout。

  <div style="height:100px; width:100px; background:#000000;" onmouseout="alert(2)">
<div style="height:50px; width:50px; background:#FF0000;" onmouseout="alert(1)">
</div>
</div>

  这里推荐一个方法,使用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内容显示效果,而菜单计时器就没什么特别,就是用来设置菜单内容。

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生