如何用jquery实现右键菜单

爱学习的小伙伴都会用过jquery，但是叫你实现右键菜单，你知道怎么做吗?不知道的话，看一下由小编为你整理的关于如何用jquery实现右键菜单的资料，希望你们喜欢。

如何用jquery实现右键菜单？

在一些管理后台，我们会模拟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，示例：

<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>