首页 > 文章 > web前端 > js模拟电脑选择多文件夹效果_选区代码_javascript技巧

js模拟电脑选择多文件夹效果_选区代码_javascript技巧

WBOY原创: 2016-05-16 19:00:401184浏览

代码很简单，会继续完善。。。
按住鼠标键不动，拖动鼠标，会看到效果

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

update:
1. 针对前2个beta版，该版本修复了前两个版本出现的 bug ，
2. 进行了代码的简单封装（由于本人初学js，对js掌握的很浅，因此面向对象的理解很差，封装的不好）；
3. 增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样，还不能达到仿windows的选区Shift键的功能)。
4. 增加了获取“被选区选中元素”的方法，可以点击按钮“getRegions”看效果。
调用方法：

复制代码代码如下:

new RegionSelect({ 
region:'div.fileDiv', 
selectedClass: 'seled' 
}).select();

增强效果代码

document.getElementsBySelector = function(selector) {

if (!document.getElementsByTagName) { 
return new Array(); 
}

var tokens = selector.split(' '); 
var currentContext = new Array(document); 
for (var i = 0; i < tokens.length; i++) { 
token = tokens[i].replace(/^\s+/,'').replace(/\s+$/,'');; 
if (token.indexOf('#') > -1) {

var bits = token.split('#'); 
var tagName = bits[0]; 
var id = bits[1]; 
var element = document.getElementById(id); 
if (tagName && element.nodeName.toLowerCase() != tagName) {

return new Array(); 
} 
currentContext = new Array(element); 
continue; 
} 
if (token.indexOf('.') > -1) {

var bits = token.split('.'); 
var tagName = bits[0]; 
var className = bits[1]; 
if (!tagName) { 
tagName = '*'; 
}

/*--------------------------------------------------------------------------------------------------------*/ 
/** 
* author: 王永山 
* version: 1.1 beta 
* date: 2008-09-09 
* email: [email]wangys0927@163.com[/email] 
* 
* update: 
* 1. 针对前2个beta版，该版本修复了前两个版本出现的 bug ， 
* 2. 进行了代码的简单封装（由于本人初学js，对js掌握的很浅，因此面向对象的理解很差，封装的不好）； 
* 3. 增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样，还不能达到仿windows的选区Shift键的功能)。 
* 4. 增加了获取"被选区选中元素"的方法，可以点击按钮"getRegions"看效果。 
*/

alert("共选择 "+arr.length+" 个文件，分别是：\n"+selInfo); 
         
    } 
     
        </script>     
     
<button onclick="showSelDiv();">getRegions</button> 
<div class="fileDiv">file1</div> 
<div class="fileDiv">file2</div> 
<div class="fileDiv">file3</div> 
<div class="fileDiv">file4</div> 
<div class="fileDiv">file5</div> 
<div class="fileDiv">file6</div> 
<div class="fileDiv">file7</div> 
<div class="fileDiv">file8</div> 
<div class="fileDiv">file9</div> 
<div class="fileDiv">file10</div> 
<div class="fileDiv">file11</div> 
<div class="fileDiv">file12</div> 
<div class="fileDiv">file13</div> 
<div class="fileDiv">file14</div> 
<div class="fileDiv">file15</div> 
<div class="fileDiv">file16</div> 
<div class="fileDiv">file17</div> 
<div class="fileDiv">file18</div> 
<div class="fileDiv">file19</div> 
<div class="fileDiv">file20</div> 
<div class="fileDiv">file21</div> 
<div class="fileDiv">file22</div> 
<div class="fileDiv">file23</div> 
<div class="fileDiv">file24</div> 
<div class="fileDiv">file25</div> 
<div class="fileDiv">file26</div> 
<div class="fileDiv">file27</div> 
<div class="fileDiv">file28</div> 
<div class="fileDiv">file29</div> 
<div class="fileDiv">file30</div> 
<div class="fileDiv">file31</div> 
<div class="fileDiv">file32</div> 
<div class="fileDiv">file33</div> 
<div class="fileDiv">file34</div> 
<div class="fileDiv">file35</div> 
<div class="fileDiv">file36</div> 
<div class="fileDiv">file37</div> 
<div class="fileDiv">file38</div> 
<div class="fileDiv">file39</div> 
<div class="fileDiv">file40</div> 
<div class="fileDiv">file41</div> 
<div class="fileDiv">file42</div> 
<div class="fileDiv">file43</div> 
<div class="fileDiv">file44</div> 
<div class="fileDiv">file45</div> 
<div class="fileDiv">file46</div> 
<div class="fileDiv">file47</div> 
<div class="fileDiv">file48</div> 
<div class="fileDiv">file49</div> 
<div class="fileDiv">file50</div> 
<div class="fileDiv">file51</div> 
<div class="fileDiv">file52</div> 
<div class="fileDiv">file53</div> 
<div class="fileDiv">file54</div> 
<div class="fileDiv">file55</div> 
<div class="fileDiv">file56</div> 
<div class="fileDiv">file57</div> 
<div class="fileDiv">file58</div> 
<div class="fileDiv">file59</div> 
<div class="fileDiv">file60</div>

<div style="float:left;width:100%;"><button onclick="showSelDiv();">getRegions</button></div> 
         
    <script> 
new RegionSelect({ 
    region:'div.fileDiv', 
    selectedClass: 'seled' 
}).select(); 
    </script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：javascript实现的树型下拉框改进版_导航菜单下一篇：JavaScript的学习入门整理篇_基础知识

查看更多

js模拟电脑选择多文件夹效果_选区代码_javascript技巧

相关文章