夏日博客

A-A+

jquery实现鼠标右键弹窗删除/重命名等操作实例

2016年01月11日 前端设计 暂无评论 阅读 6 views 次

本文我们用jquery来实现一个在操作数据时非常实用的案例：鼠标在一条记录上右键单击，弹出一个小窗口提示我们是删除还是重全名选择，点单击我们就可以实现操作。

在一些管理后台，我们会模拟windows系统鼠标右键的操作实现删除和重全名等，本文我们来告诉你用jquery如何实现。

1.因为window默认是可以右键的，所以我们要先禁用window原生的右键弹窗（禁用包括2个区域，1是鼠标右键的区域div 2是弹出窗口的div）：

  1. //禁用区域右键  
  2. $('body').on('contextmenu','.bottompage',function(){  
  3.     return false;  
  4. });  
  5. $('body').on('contextmenu','#notebookedit',function(){  
  6.     return false;  
  7. });  

2.jq右键点击事件的方法。

需要注意的是（1，弹窗多次点击会有偏移，所有每次弹出需要位置置为0 2，如果页面存在滚动条的话，需要将滚动条计算进去 3，获取滚动条偏移量不一定使用body对象，使用滚动条所在的div作为对象）

  1. //点击需要重命名的div  
  2. $('body').on('mousedown','.noteitemstyle',function(event){  
  3.     //右键事件event.button==2  
  4.     if(event.button==2)  
  5.     {  
  6.         var offset=$(this).offset();  
  7.         //放置点击别处时的弹窗不消失造成误差  
  8.         $('.noteeditlist').css('display','none');  
  9.           
  10.         //将弹窗的div绝对定位置清零，否则多次点击会产生偏移量  
  11.         $('.noteeditlist').css('position','absolute');  
  12.         $(".noteeditlist").css("left","0px");  
  13.         $(".noteeditlist").css("top","0px");  
  14.           
  15.         //获取当前页面所在div的滚动条的高度，本页面只有垂直滚动条  
  16.         var locationY = $('.wrap').scrollTop();  
  17.           
  18.         offset.top=parseInt(offset.top)+parseInt(locationY);  
  19.           
  20.         //展示弹窗div ,并根据点击源对其属性赋值  
  21.         $('.noteeditlist').offset(offset);              
  22.         $('.noteeditlist').css('display','block');                              
  23.         var id=$(this).attr('noteid');  
  24.         $('.noteeditlist').attr('renameid',id);  
  25.           
  26.     }  
  27. });  

3 弹窗弹出之后，我们继续操作自动隐藏弹窗的方法

  1. //点击页面其他部分弹窗隐藏  
  2. $(document).bind('click',function(e){  
  3.     var e = e || window.event; //浏览器兼容性  
  4.     var elem = e.target || e.srcElement;  
  5.     while (elem) { //循环判断至跟节点，防止点击的是div子元素  
  6.         if ((elem.id && elem.id=='notebookedit')||(elem.className && elem.className=='notebooklistview')){  
  7.         return;  
  8.         }  
  9.         elem = elem.parentNode;  
  10.         }  
  11.         $('#notebookedit').css('display','none'); //点击的不是div或其子元素          
  12.     });   

4 字段重命名功能实现思路是

1）右键弹窗,弹窗中有重命名子项的选项，

2）点击之后,最初右键的div变为可编辑的状态，

3）点击是会将最初右键的主题id赋值给弹窗的一个属性

4）编辑之后点击页面任何其他地方即代表重命名完成，发送ajax请求进行重命名

代码如下:

  1. $(document).bind('click',function(e){  
  2.     var e = e || window.event; //浏览器兼容性  
  3.     var elem = e.target || e.srcElement;  
  4.     while (elem) { //循环判断至跟节点，防止点击的是div子元素  
  5.         if ((elem.className && elem.className=='notebookrenameedit')||(elem.id && elem.id=='notebookrename')){  
  6.         return;  
  7.         }  
  8.         elem = elem.parentNode;  
  9.     }  
  10.     var renameid=$('#notebookrename').attr('renameid');  
  11.     //判断是否进行了重命名的编辑操作：点击弹窗重命名时会对renameid赋值  
  12.     if(renameid!='-1')  
  13.     {                       
  14.       var renameval=$("#"+renameid+" .notebookrenameedit :input[name='rename']").val();  
  15.        
  16.       //点击的不是div或其子元素      
  17.       $.post('index.php?r=coursespace/coursespace/notelistreload', {  
  18.             renameid: renameid, renameval: renameval  
  19.         },  
  20.         function(data, status) {  
  21.             if (status = 'success') {  
  22.                 $('.bottompage').html(data);  
  23.                 //赋值标记为未点击重命名的状态  
  24.                 $('#notebookrename').attr('renameid', '-1');  
  25.                 $('.notebookrenameedit').css('display', 'none');  
  26.                 CKEDITOR.replace("cke3",{toolbar:[  
  27.                                                   //加粗 斜体，划线  穿过线  下标字  上标字  
  28.                                                   ['Bold','Italic','Underline','Strike','Subscript','Superscript'],  
  29.                                                   //数字列表   实体列表   减小缩进    增大缩进  
  30.                                                   ['NumberedList','BulletedList','-','Outdent','Indent'],  
  31.                                                   //左对齐   居中对齐   右对齐    两端对齐  
  32.                                                   ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],  
  33.                                                   ['Styles','Format','Font','FontSize'],],width:450});  
  34.             } else {  
  35.                 alert("加载失败！")  
  36.             }  
  37.         });      
  38.     }  
  39. });   

5 重命名的实现原理就是将展示的div替换成可以编辑的input，示例：

  1. <div class='notebookname'><?= $Rpnotebook->title ?></div>        
  2. <div class='notebookrenameedit' style='display:none;'>  
  3. <input type='text' name='rename' value=<?= $Rpnotebook->title ?> style='width:120px;' class='notebookrenameeditid'>  
  4. </div>  

6 弹窗的div

  1. <div id='notebookedit' class="notebookdelete" style="display:none; " editid="-1" >  
  2.  <div class='notebookedititem' id='notebookitemdelete'>删除</div>  
  3.  <div class='notebookedititem' id='notebookrename' renameid='-1'>重命名</div>  
  4. </div>  
标签：

给我留言