就是在网页上模拟windows的文件多选效果,类似于百度云里面的多文件选中。需求如下(见下图):
1. 单击某一图片,选中该图片,再次单击,取消选中
2. 单击2图,2图被选中,按住shift,单击6图,2~6图都被选中,shift按住不放,单击4图,2~4图被选中,5、6图取消选中,shift按住不放,再次单击8图,那么2~8图都应该被选中
3. 单击2图,2图被选中,按住shift,单击6图,2~6图都被选中,松开shift,单击10图,10图被选中,按住shift,单击12图,2~6图依然保持选中效果,并将10~12图都选中
1和2的功能已经实现了,见下方代码,直接粘贴到一个文件打开就可看到效果。但是第3个需求不知道怎么弄,第2个和第3个需求一个弄好了另外一个就废了。真蛋疼!求大神赐教。
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>keyMulSelect</title> <style type="text/css"> #main { width: 1150px; height: 780px; border: 1px solid #e7e81a; margin: auto; } p { float: left; width: 150px; height: 150px; border: 1px dotted grey; margin: 19px; } p[sel = "sel"] { border: 1.8px solid red; } </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { var start = null; $("p").click(function (e) { e = e || event; if (e.shiftKey) { var si = $(start).index(), ti = $(this).index(); var sel = $("p").slice(Math.min(si, ti), Math.max(si, ti) + 1); sel.attr("sel", "sel"); $("p").not(sel).removeAttr("sel"); return; } start = this; if ($(this).attr("sel") == "sel") { $(this).removeAttr("sel"); } else { $(this).attr("sel", "sel"); } }) }) </script> </head> <body> <div id="main"> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p> </div> </body> </html>
今天跟需求人员讨论了一下,决定将第3个需求改成按住ctrl + shift键,需求1、2保持不变。终于解决了啊,好开森(也就这出息了)。。。
1, 百度云的文件选择和需求3不一样, 或许你可以再琢磨细化一下需求?
2, 下面是一个符合3个需求的方法, /**/内是要写的代码, //是注释