学习啦 > 学习电脑 > 电脑硬件知识 > 键盘鼠标 > 如何用jquery实现右键菜单

如何用jquery实现右键菜单

时间: 迪豪910 分享

如何用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>

1827354