如何用jquery实现右键菜单
如何用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>