jQuery 处理Ctrl 和shift 实现多选功能
来源:互联网 发布:java servlet 文件接口 编辑:程序博客网 时间:2024/06/06 00:51
<span style="font-size:18px;"><style type="text/css"> #list div,#list .on{ width:200px; border: 1px solid #ddd; margin: 2px; cursor: pointer; } #list .on{ border: 1px solid red; background-color: #fff731 }</style><div id="list"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div></div><input type="text" id="tt" style="width:200px" /><script type="text/javascript">$(document).ready(function(){ var key=0; //记录ctrl/shift键 var val=",";//记录已经选择的值 var ibe =-1; //记录初始值 $(window).keydown(function(e){ if(e.ctrlKey){ key=1; }else if(e.shiftKey){ key=2; } $("#bb").val("初始值:"+ibe+" key:"+key); }).keyup(function(){ key=0; }); $("#list div").click(function(){ var i=$(this).index(); if(ibe!=-1&&key==2){ $(this).siblings().removeAttr("class"); val=","; for(var ii=Math.min(i,ibe);ii<=Math.max(i,ibe);ii++){ val+=ii+","; $("#list div").eq(ii).addClass("on"); } }else if(key==1){ if(val.indexOf(","+i+",")!=-1){ val=val.replace(","+i+",",","); $(this).removeAttr("class"); }else{ val+=i+","; $(this).addClass("on"); ibe=i; } }else{ $(this).addClass("on").siblings().removeAttr("class"); ibe=i; val=","+i+","; } $("#tt").val(val); });});</script></span>
0 0
- jQuery 处理Ctrl 和shift 实现多选功能
- extjs treepanel的ctrl、shift多选、连选功能实现
- Jquery结合Ctrl和Shift键,快速多选与反选
- PowerBuilder用Ctrl和Shift键实现鼠标多选数据行
- VC CListControl中按下Ctrl(或Shift)多选项目和取值的实现
- MFC实现CListBox 使用CTRL和SHIFT多选
- 将Eclipse的ctrl + k和ctrl + shift + k功能移到IDEA中
- 按CTRL,SHIFT,ALT等键扩展easyui的datagrid多选实现
- 按CTRL,SHIFT,ALT等键扩展easyui的datagrid多选实现
- QT 按键处理 快捷键处理 shift + ctrl
- 捕获Ctrl、Ctrl+Alt和Ctrl+Alt+Shift组合键
- zTree shift多选功能
- vs2008实现eclipse Ctrl+Shift+R功能,即打开资源文件快捷键
- c# ctrl+tab,ctrl+shift+tab的处理
- CTRL+SHIFT+O的实现方法
- JQuery实现shift键多选
- MFC CListBox设置CTRL和SHIFT多选
- 随笔,关于快捷键ctrl+shift RT和ctrl+T
- 好客来商城
- Delphi XE5 for Android (五)
- Bloom Filter 系列改进之Multi-dimension Bloom Filter
- Delphi XE5 for Android (六)
- 实模式与保护模式
- jQuery 处理Ctrl 和shift 实现多选功能
- Delphi XE5 for Android (七)
- Delphi XE5 for Android (八)
- 数据库基础
- dreamvc框架(一)ioc容器的集成
- Delphi XE5 for Android (九)
- 华为介绍-应届生必看
- 图像的极坐标表示
- Delphi XE5 for Android (十)