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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
Date对象格式化函数代码
Jul 17 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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截取中文字符串不乱码的方法
2013/12/25 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
php7性能提升的原因详解
2019/10/13 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
分分钟入门python语言
2018/03/20 Python
Django model update的多种用法介绍
2020/03/28 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
社区中秋节活动方案
2014/01/29 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2015个人半年总结范文
2015/03/09 职场文书
工程进度款催款函
2015/06/24 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
2019年入党思想汇报
2019/03/25 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书