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 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
JS编程小常识很有用
Nov 26 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
vue配置多页面的实现方法
May 22 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 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查询相似度最高的字符串的方法
2015/03/12 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python实现爬虫下载漫画示例
2014/02/16 Python
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
一些.net面试题
2014/10/06 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
公司拓展活动方案
2014/02/13 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
作风整顿剖析材料
2014/09/30 职场文书
实名检举信范文
2015/03/02 职场文书
商场营业员岗位职责
2015/04/14 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书