基于JQUERY的改进型浮动层(右键)列表菜单

花生米AJAX-UI系列之:基于JQUERY的浮动层(右键)列表菜单0.2改进版 改版本是“使用JQUERY 自创的自定义右键菜单插件 ”的重大改进，原始版本不再使用！ 可以对表格，列表，或者单个DOM容器进行右键绑定 菜单项的文字、图标样式，调用方法均可自定义,图标样式定义更为灵活 菜单中分隔符的多少和位置也可自定义 提供了菜单项中那一项被作废（即点击了也不能调用其方法的状态），哪一项被重新启用的方法 正式支持级联式多层子菜单显示，子菜单与其父结点所在父级菜单呈树形数据结构关系。 且子菜单可以删除，也可以把一个叶子结点扩展成为子菜单列表的父结点。 子菜单也是一个GooContextMenu类对象，保存在父结点所在菜单GooContextMenu类对象的$childMenu数组中， 一些方法调用实际上为递归式调用。 菜单显示不再以鼠标事件发生点e为坐标，会根据浏览器视窗的大小以及菜单的宽高、事件发生的坐标为判断条件， 以确保菜单显示时不会让浏览器的滚动条出现或长度改改，同时又能在现有视窗中完整显示菜单所有内容。 在绑定能触发菜单显示的事件时，可用两种方法： //绑定一个父框架以操作里面的多项子元素（只需绑定一次），用来代替对每个子元素都绑定 //单单只绑定一个DOM元素(参数jq为一个JQUERY对象) 两种方法都要传一个必要的事件名称参数，如contextmenu右击，mousedown鼠标按下，比原来只能右键弹出更灵活。 改变了点击菜单项目时，触发方法的传参定义，现在只传两个参数：（点击菜单项目单元的ID，触发浮动菜单显示的DOM容器的ID） ------------------------------------------------------- /*右键菜单定义--GooContextMenu类*/ //contextDiv:JQUERY对象，要渲染的DOM //menuWidth 数字，菜单的宽度; //menuContent,JSON数据，格式在DEMO页面中 //bindingFun要绑定的函数方法组合,JSON数据 //行高一律定为22PX+2px的边框 //构造完后，还需要行另外的初始化才能用 构造函数 GooContextMenu(contextDiv,menuWidth): 类内成员变量： this.$contextDiv：用来作整个右键菜单容器的DIV this.$menuDiv： 用来保存所有菜单项的DIV this.$menuWidth： 菜单项的宽度 this.$numList： 菜单项的数量 this.$numHr： 分隔符的数量 this.$target： (右击)触发菜单打开对象的ID this.$funBind： 每个菜单项被点击时触发的方式集， this.$listHeight：所有菜单项和分隔符加起来后的总高度 this.$makeShow： 导致显示右键菜单的事件名称，如单击是"click",右击是"contextmenu" this.$showChildId：正在显示子菜单的非叶子结点ID this.$childMenu： 本菜单所有的子菜单数组，单元为一个GooContextMenu对象，索引为该子菜单的父结点ID show(e): 显示菜单在事件e发生的位置上 show2(left,top)：强调显示菜单在视窗指定的(left,top)位置上 hide(): 隐藏菜单(所以有显示出的几级子菜单，也一并隐藏) setIcon(id,cls)：设置菜单单元（可以是子菜单中的）的图标样式，传参:id为单元DOM的ID，cls为样式类名称 getIcon(id)：获取菜单单元（可以是子菜单中的）的图标样式，传参:id为单元DOM的ID setText(id,text)：设置菜单单元（可以是子菜单中的）的文字，传参:id为单元DOM的ID，text为文字内容 getText(id)：获取菜单单元（可以是子菜单中的）的文字，传参:id为单元DOM的ID appendItem(newItem,seq,order,fun): 加入一个菜单项()方法可选 //newItem:一个新的菜单项组合JSON记录 //seq:要插入到的位置 //order:插到前边还是后边"before","after"两个值 //fun:点击时调用到的方法function appendItemList(menuContent,bindingFun)：增加一组菜单项,参数menuContent与bindingFun:见下文 removeItem(seq): 删除一个菜单项(参数seq为操作对象为右键菜单从上至下中第几个，从第一个开始) removeItem2(id): 删除一个菜单项(参数id为操作对象的ID唯一序列号) removeHr(seq): 删除一上分隔符(参数seq为操作对象为右键菜单从上至下中第几个，从第一个开始) remove()：删除菜单自己以及所有子菜单 remvoeChildMenu(id)：彻底删除某个父ID为传参id的子菜单，所属父结点变成叶子结点 attentChildMenu(id,menuContent,bindingFuns)： 扩展某个菜单叶子结点为非叶子结点，附加上一个子菜单GooContextMenu对象 id为菜单单元的ID，menuContent，bindingFuns的数据结构定义见下文 bindMouseOver(aid)：绑定菜单栏中,判断一个菜单单元是否为非叶子项目，并展示滑过的非叶子项目的子菜单（建议程序内部使用，用户不必调用些方法） ableItem(seq,able)： 使一个菜单项能使用/作废不能使用但仍显示,方法不删除 unbind(jq): 在目标的JQUERY对象上取消绑定右键 bindParent(jq,attrName,attrValue,event): 绑定一个父框架在多项子元素，只绑定一次 （用户可重写此方法） //(参数jq为一个JQUERY对象,event为事件名称,如单击是"click",右击是"contextmenu") //attrName,attrValue : 是用来作判断右键菜单是否弹出的条件，条件来自于绑定对象的属性中. bindClick(): 绑定右键菜单栏中,当一个项目被点击时触发的事件（用户可重写此方法） bingObject(jq,evevt): 单单只绑定一个DOM元素(参数jq为一个JQUERY对象,event为事件名称,如单击是"click",右击是"contextmenu")（用户可重写此方法） ------------------------------------------------------------------- 构造方法中，一些参数的格式规范 bindingFun:要绑定的函数方法组合,JSON数据 其中，每一个元素名称代表了菜单项的ID，根据ID来确定执行的方法 id:菜单中被点击的那个单元的ID t:代表触发菜单显示的鼠标事件发生时所在的对象的ID var $bindFuns={ 'r1':function(id,t){ play(id,t); }, 'r2':function(id,t){ pause(id,t); }, 'r3':function(id,t){ stops(id,t); }, 'r4':function(id,t){ prints(id,t); }, 'r6':function(id,t){ website(id,t); } } menuContent:菜单项的一些基本信息 //id为唯一序列号 //cls为期间项左边图标的CSS样式类 //text为文字 //disable表示该菜单单元是否为无效，默认为FALSE //childItems：但数组单元JSON中有此子数组时，代表该单元为非叶子结点，并有一个子菜单；childItems与menuContent的数据结构完全一样，这样就使得一个完整的menuContent数组的数据结构实际上是一个描述多层级联菜单（一个根菜单和它多级子菜单）的树形结构。 //childFuns：每个非叶子结点中，与其子菜单定义数组childItems相匹配的点击触动方法事件集合，数据结构与bindingFun一样，详见bindingFun定义。 var $menuContent=[ {id:'r1',cls:'play',text:'播放录音'}, {id:'r2',cls:'pause',text:'暂停播放'}, {id:'r3',cls:'stop',text:'停止播放'}, {hr:''}, {id:'r4',cls:'print',text:'打印文件', childItems:[{id:'b3',cls:'fuck',text:'fuck you'},{id:'b1',cls:'fuck',text:'fuck you'}], childFuns:{'b3':function(id,t){alert(id+"fuck you"+t)},'b1':function(id,t){alert(id+"fuck you"+t)}} }, {id:'r6',cls:'website',text:'互联网搜索',disable:true}, {id:'r7',cls:'tool',text:'选项配置'} ]; newItem:单单只增加一个菜单项时，菜单项的数据格式： {id:'r4',cls:'print',text:'打印文件'} 其实与menuContent数组中的单元格式一模一样！