标签：
1.首先禁用window原生的右键弹窗（禁用包括2个区域，1是鼠标右键的区域div 2是弹出窗口的div）：
//禁用区域右键 $(‘body‘).on(‘contextmenu‘,‘.bottompage‘,function(){ return false; }); $(‘body‘).on(‘contextmenu‘,‘#notebookedit‘,function(){ return false; });
2.下面就是右键点击事件的方法了。
需要注意的是（1，弹窗多次点击会有偏移，所有每次弹出需要位置置为0 2，如果页面存在滚动条的话，需要将滚动条计算进去 3，获取滚动条偏移量不一定使用body对象，使用滚动条所在的div作为对象）
//点击需要重命名的div $(‘body‘).on(‘mousedown‘,‘.noteitemstyle‘,function(event){ //右键事件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 = $(‘.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‘,function(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）右键弹窗 ，弹窗中有重命名子项的选项，
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==‘notebookrenameedit‘)||(elem.id && elem.id==‘notebookrename‘)){ return; } elem = elem.parentNode; } var renameid=$(‘#notebookrename‘).attr(‘renameid‘); //判断是否进行了重命名的编辑操作：点击弹窗重命名时会对renameid赋值 if(renameid!=‘-1‘) { var renameval=$("#"+renameid+" .notebookrenameedit :input[name=‘rename‘]").val(); //点击的不是div或其子元素 $.post(‘index.php?r=coursespace/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‘,‘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="display:none; " editid="-1" > <div class=‘notebookedititem‘ id=‘notebookitemdelete‘>删除</div> <div class=‘notebookedititem‘ id=‘notebookrename‘ renameid=‘-1‘>重命名</div> </div>
附上效果图：
OK ，that‘s all ! 本文实现思路过程 偏移量部分参考过一位别人的博客思路，附上地址：http://blog.csdn.net/xuexiaodong009/article/details/6553292
标签：
原文地址：http://www.cnblogs.com/mengsx/p/4636217.html
