jquery自定义右键菜单、全选、不连续选择


Posted in Javascript onMarch 01, 2016

最近在项目中要实现一些自定义效果,例如右键菜单、全选、不连续选择等等,个人认为主要是理清楚逻辑和事件关系。要实现这些,也有现成的插件可以用,如jQuery UI的selectable。

1、右键菜单
当浏览网页时,单击鼠标右键(或ctrl+触模板左键)会出现浏览器默认的右键菜单项,就像这样子的:

jquery自定义右键菜单、全选、不连续选择

但是当要对某个元素自定义右键,像这样子的:

jquery自定义右键菜单、全选、不连续选择

就必须得先禁用浏览器默认的菜单,需要监听contextmenu事件,关键代码如下:

$(function(){
 $('#box').on('contextmenu',function(event){
 event.preventDefault();
  $(this).trigger('click');
  $('#menulist').css({
   top: event.pageY,
   left: event.pageX
  });
 });
 $('#box').click(function(){
  $('#menulist').css('display','block');
 });
})

2、全选
默认的ctrl+A(MAC下是command+A)会选择整个网页或者某个获得焦点的可编辑元素。

<div id='box'>
 <p class='first'>这是个div,这是个div,</p>
 <p>这是个div,这是个div,</p>
 <p>这是个div,这是个div,</p>
 <p>这是个div,这是个div,</p>
 <p>这是个div,这是个div,</p>
</div>
<div id='other'>
 <p class='first'>这是另外一个div,这是另外一个div,</p>
 <p>这是另外一个div,这是另外一个div,</p>
 <p>这是另外一个div,这是另外一个div,</p>
 <p>这是另外一个div,这是另外一个div,</p>
</div>

如果页面中只有这两个div,按下ctrl/cmd+A这两个div都会被选中,若只想选择div#box的内容,简单地方式是给该div加上contentEditable=true。另外一种方式就是键盘事件的监听。

模拟选中div#box所有子元素p并高亮:

$(function(){
 $(document).keydown(function(event){
 //windows下是event.ctrlKey
 if(event.metaKey && event.which === 65){
  event.preventDefault();
  $('#box>p').trigger('click');
 }
 });
 $('#box').on('click', 'p', function(){
 $(this).css('color','red');
 });
});

3、shift实现连续的选择
shift结合鼠标右键实现元素的连续选择,这里对其进行简单模拟。

<div id='box' class="unselect">
 <p class='first'>这是个div,这是个div,</p>
 <p>这是个div,这是个div,</p>
 <p>这是个div,这是个div,</p>
 <p>这是个div,这是个div,</p>
 <p>这是个div,这是个div,</p>
</div>

按住shift时,浏览器有默认的连选,先禁用掉:

.unselect{
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
}

对于低版本的IE,利用selectstart事件:

$('#box')[0].onselectstart = function(e){
  e.preventDefault();
  return false;
 };

给p注册click事件,同时要监听document对象的keydown和keyup事件:

$(document).keydown(function(e){
  if(e.shiftKey){
   shiftkey = 1;
  }
 }).keyup(function(){
  shiftkey = 0;
 });
$('#box').on('click','p',function(){
  if(shiftkey === 1){
   second = $(this).index();
   for(var min = Math.min(first,second); min <= Math.max(first,second); min++){
    $('#box').find('p').eq(min).css('color','red');
   }
  } else {
   first = $(this).index();
   $(this).css('color','red').siblings().css('color','black');
  }
 })

4、不连续选择
不连续选择需要监听ctrl键(mac下command键),同时给元素注册click事件。

$(document).keydown(function(e){
  if(e.metaKey){ //win是e.ctrlKey
   ctrlkey = 2;
  }
 }).keyup(function(){
  ctrlkey = 0;
 });
 $('#box').on('click','p',function(){
  if(ctrlkey === 2){
   $(this).css('color','red');
  } else {
   $(this).css('color','red').siblings().css('color','black');
  }
 })

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 事件队列调整方法
Sep 18 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
js消除图片小游戏代码
Dec 11 Javascript
Javascript实现单选框效果
Dec 09 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 #Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 #Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 #Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 #Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 #Javascript
javascript使用Promise对象实现异步编程
Mar 01 #Javascript
javascript html5实现表单验证
Mar 01 #Javascript
You might like
PHP中的正规表达式(二)
2006/10/09 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
php实现头像上传预览功能
2017/04/27 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
python多线程同步实例教程
2019/08/11 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
视图的作用
2014/12/19 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
办公室内勤工作职责
2013/12/11 职场文书
文艺晚会主持词
2014/03/24 职场文书
义和团口号
2014/06/17 职场文书
体育运动会广播稿
2014/10/05 职场文书
大学班干部竞选稿
2015/11/20 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
我的收音机情缘
2022/04/05 无线电