最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery实现鼠标右键弹窗删除/重命名等操作实例
时间:2015-07-10 编辑:简简单单 来源:一聚教程网
在一些管理后台,我们会模拟windows系统鼠标右键的操作实现删除和重全名等,本文我们来告诉你用jquery如何实现。
1.因为window默认是可以右键的,所以我们要先禁用window原生的右键弹窗(禁用包括2个区域,1是鼠标右键的区域div 2是弹出窗口的div):
//禁用区域右键 $('body').on('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){ //右键事件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,示例:
= $Rpnotebook->title ?>
6 弹窗的div
最后我们的效果图如下:
这样我们就成功的实现了用jquery操作后台右键数据重命名的功能,感兴趣的朋友可以参考一下。
相关文章
- jquery新添加删除行实例 11-20
- jquery动态增加删除控件实例代码 08-01
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31