如何用jquery实现右键菜单_jquery 右键菜单

1、本文格式为word版，下载可任意编辑如何用jquery实现右键菜单_jquery 右键菜单 爱学习的小伙伴都会用过jquery，但是叫你实现右键菜单，你知道怎么做吗?不知道的话，看一下由我为你整理的关于如何用jquery实现右键菜单的资料，盼望你们喜爱。 如何用jquery实现右键菜单？ 在一些管理后台，我们会模拟windows系统鼠标右键的操作实现删除和重全名等，本文我们来告知你用jquery如何实现。 1.由于window默认是可以右键的，所以我们要先禁用window原生的右键弹窗(禁用包括2个区域，1是鼠标右键的区域div 2是弹出窗口的div)： /禁用区域右键 $(body).on(

2、contextmenu,.bottompage,function() return false; ); $(body).on(contextmenu,#notebookedit,function() return false; ); 2.jq右键点击大事的方法。 需要留意的是(1，弹窗多次点击会有偏移，全部每次弹出需要位置置为0 2，假如页面存在滚动条的话，需要将滚动条计算进去 3，猎取滚动条偏移量不肯定使用body对象，使用滚动条所在的div作为对象) /点击需要重命名的div $(body).on(mousedown,.noteitemstyle,function(event) /右键大事

3、event.button=2 if(event.button=2) var offset=$(this).offset(); /放置点击别处时的弹窗不消逝造成误差 $(.noteeditlist).css(display,none); /将弹窗的div肯定定位置清零，否则多次点击会产生偏移量 $(.noteeditlist).css(position,absolute); $(.noteeditlist).css(left,0px); $(.noteeditlist).css(top,0px); /猎取当前页面所在div的滚动条的高度，本页面只有垂直滚动条 var locationy = $(

4、.wrap).scrolltop(); offset.top=parseint(offset.top)+parseint(locationy); /展现弹窗div ,并依据点击源对其属性赋值 $(.noteeditlist).offset(offset); $(.noteeditlist).css(display,block); var id=$(this).attr(noteid); $(.noteeditlist).attr(renameid,id); ); 3 弹窗弹出之后，我们连续操作自动隐蔽弹窗的方法 /点击页面其他部分弹窗隐蔽 $(document).bind(click,func

5、tion(e) var e = e | window.event; /扫瞄器兼容性 var elem = e.target | e.srcelement; while (elem) /循环推断至跟节点，防止点击的是div子元素 if (elem.id elem.id=notebookedit)|(elem.classname elem.classname=notebooklistview) return; elem = elem.parentnode; $(#notebookedit).css(display,none); /点击的不是div或其子元素 ); 4 字段重命名功能实现思路是 1)

6、右键弹窗 ，弹窗中有重命名子项的选项， 2)点击之后， 最初右键的div变为可编辑的状态， 3)点击是会将最初右键的主题id赋值给弹窗的一个属性 4)编辑之后点击页面任何其他地方即代表重命名完成，发送ajax恳求进行重命名 代码如下： $(document).bind(click,function(e) var e = e | window.event; /扫瞄器兼容性 var elem = e.target | e.srcelement; while (elem) /循环推断至跟节点，防止点击的是div子元素 if (elem.classname elem.classname=noteboo

7、krenameedit)|(elem.id elem.id=notebookrename) return; elem = elem.parentnode; var renameid=$(#notebookrename).attr(renameid); /推断是否进行了重命名的编辑操作：点击弹窗重命名时会对renameid赋值 if(renameid!=-1) var renameval=$(#+renameid+ .notebookrenameedit :inputname=rename).val(); /点击的不是div或其子元素 $.post(index.php?r=coursespace

8、/coursespace/notelistreload, renameid: renameid, renameval: renameval , function(data, status) if (status = success) $(.bottompage).html(data); /赋值标记为未点击重命名的状态 $(#notebookrename).attr(renameid, -1); $(.notebookrenameedit).css(display, none); ckeditor.replace(cke3,toolbar: /加粗 斜体，划线 穿过线 下标字 上标字 bold,

9、italic,underline,strike,subscript,superscript, /数字列表 实体列表 减小缩进 增大缩进 numberedlist,bulletedlist,-,outdent,indent, /左对齐 居中对齐 右对齐 两端对齐 justifyleft,justifycenter,justifyright,justifyblock, styles,format,font,fontsize,width:450); else alert(加载失败!) ); ); 5 重命名的实现原理就是将展现的div替换成可以编辑的input，示例： div class=notebookname?= $rpnotebook-title ?/div div class=notebookrenameedit style=display:none; input type=text name=rename value=?= $rpnotebook-title ? style=width:120px; class=notebookrenameeditid /div 6 弹窗的div div id=notebookedit class=notebookdelete style=dis