用js实现shift+单击来选择多项

由于工作需要,在web项目的几个批量处理功能中使用js来实现shift+点击左键选择连续的多项,通过查阅了下网上资源,挑了一种简单的实现方式,这里做个简单的记录和共享。

         主要参考的资源:http://blog.sina.com.cn/s/blog_94eb1a960100zl7z.html

         主要涉及到的技术:html    javascript    jquery(这里为了写js方便就加入了该框架)

         该操作的实现思想:

                   1.记录下每次点击事件的元素在列表中的索引,放入数组中

                   2.判断点击事件时shift是否被按下,如被按下则取出数组中最后放入的两个索引

                   3.根据取出的索引,来取出在该索引范围内列表中的元素,并根据需要做处理

         下面是简单的实现代码:





无标题文档





hello1
hello2
hello3
hello4
hello5
hello6
hello7
hello8
hello9
hello10
hello11
hello12
hello13
hello14
hello15
hello16
hello17
hello18


注意事项:

         1.以上代码中需要引入jquery文件,网络jquery文件地址为:

                   http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

           用该地址代替中src值的部分就行,不过访问比较慢,建议引入本地的jquery文件,下面会提供demo的下载地址,里面有jquery文件

         2.页面中document.onselectstart=function(event)函数是禁止鼠标选中文字,主要是在选择的时候文字会出现选择的状态,会降低用户体验。如果页面中其他地方有需要需要鼠标选中文字的功能,该函数可自行根据需要处理。

demo下载地址:http://pan.baidu.com/s/1i33yxox

截图看不出来效果,需要看效果可以下载demo或者复制代码自行创建demo

你可能感兴趣的:(web前端,工作积累)