js 在页面上模拟多选，蚂蚁线线框

<html>
    <head></head>
    <style>
        body{padding-top:50px;padding-left:100px;padding-right:150px;}
        .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:10px;margin-bottom:10px;}
        .seled{border:1px solid #ff0000;background-color:#D6DFF7;}
    </style>
    <script type="text/javascript">
/*--------------------------------- 以下4个方法 摘自网络 ----------------------------------------*/
Array.prototype.remove = function( item ){
        for( var i = 0 ; i < this.length ; i++ ){
            if( item == this[i] )
                break;
        }
        if( i == this.length )
            return;
        for( var j = i ; j < this.length - 1 ; j++ ){
            this[ j ] = this[ j + 1 ];
        }
        this.length--;
     }     
 
String.prototype.replaceAll = function (AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g"); return this.replace(raRegExp,ARepText);} 
 
function getAllChildren(e) {
return e.all ? e.all : e.getElementsByTagName('*');
} 
 
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 = '*';
} 
 
var found = new Array;
var foundCount = 0;
for (var h = 0; h < currentContext.length; h++) {
var elements;
if (tagName == '*') {
elements = getAllChildren(currentContext[h]);
} else {
elements = currentContext[h].getElementsByTagName(tagName);
}
for (var j = 0; j < elements.length; j++) {
found[foundCount++] = elements[j];
}
}
currentContext = new Array;
var currentContextIndex = 0;
for (var k = 0; k < found.length; k++) {
if (found[k].className && found[k].className.match(new RegExp('\\b'+className+'\\b'))) {
currentContext[currentContextIndex++] = found[k];
}
}
continue;
}
if (token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)) {
var tagName = RegExp.$1;
var attrName = RegExp.$2;
var attrOperator = RegExp.$3;
var attrValue = RegExp.$4;
if (!tagName) {
tagName = '*';
}
var found = new Array;
var foundCount = 0;
for (var h = 0; h < currentContext.length; h++) {
var elements;
if (tagName == '*') {
elements = getAllChildren(currentContext[h]);
} else {
elements = currentContext[h].getElementsByTagName(tagName);
}
for (var j = 0; j < elements.length; j++) {
found[foundCount++] = elements[j];
}
}
currentContext = new Array;
var currentContextIndex = 0;
var checkFunction;
switch (attrOperator) {
case '=':
checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); };
break;
case '~':
checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\\b'+attrValue+'\\b'))); };
break;
case '|':
checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); };
break;
case '^':
checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); };
break;
case '$':
checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); };
break;
case '*':
checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); };
break;
default :
checkFunction = function(e) { return e.getAttribute(attrName); };
}
currentContext = new Array;
var currentContextIndex = 0;
for (var k = 0; k < found.length; k++) {
if (checkFunction(found[k])) {
currentContext[currentContextIndex++] = found[k];
}
}
continue;
}
tagName = token;
var found = new Array;
var foundCount = 0;
for (var h = 0; h < currentContext.length; h++) {
var elements = currentContext[h].getElementsByTagName(tagName);
for (var j = 0; j < elements.length; j++) {
found[foundCount++] = elements[j];
}
}
currentContext = found;
}
return currentContext;
} 
 
/*--------------------------------------------------------------------------------------------------------*/
/**
* 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. 增加了获取“被选区选中元素”的方法<a href="http://www.codesky.net" class="hden">源码天空</a>，可以点击按钮“getRegions”看效果。
*/ 
 
function addEvent(eventType,eventFunc,eventObj){
     eventObj = eventObj || document;
     if(window.attachEvent) eventObj.attachEvent("on"+eventType,eventFunc);
if(window.addEventListener) eventObj.addEventListener(eventType,eventFunc,false);
}
function clearEventBubble(evt){
         evt = evt || window.event;
     if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true;
if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false;
} 
 
function posXY(event){
    event = event || window.event;
var posX = event.pageX || (event.clientX +
            (document.documentElement.scrollLeft || document.body.scrollLeft));
var posY = event.pageY || (event.clientY +
            (document.documentElement.scrollTop || document.body.scrollTop));
return {x:posX, y:posY};
}
//----------- 区域选择关键方法 -----------------------
    var _selectedRegions = [];
    function RegionSelect(selRegionProp){
         this.regions =[];
         var _regions = document.getElementsBySelector(selRegionProp["region"]);
         if(_regions && _regions.length > 0){
             var _self = this;
              for(var i=0; i< _regions.length;i++){
                      _regions[i].onmousedown = function(){
                              var evt = window.event || arguments[0];
                              if(!evt.shiftKey && !evt.ctrlKey){
                                  // 清空所有select样式
                                  _self.clearSelections(_regions);
                                  this.className += " "+_self.selectedClass;
                                  // 清空selected数组，并加入当前select中的元素
                                  _selectedRegions = [];
                                  _selectedRegions.push(this);
                              }else{
                                  if(this.className.indexOf(_self.selectedClass) == -1){
                                          this.className += " "+_self.selectedClass;
                                          _selectedRegions.push(this);
                                  }else{
                                       this.className = this.className.replaceAll(_self.selectedClass,"");
                                       _selectedRegions.remove(this);
                                  }
                              }
                              clearEventBubble(evt);
                      }
                      this.regions.push(_regions[i]);
              }
         }
         this.selectedClass = selRegionProp["selectedClass"];
         this.selectedRegion = [];
         this.selectDiv = null;
         this.startX = null;
         this.startY = null;
    } 
 
    RegionSelect.prototype.select = function(){
        var _self = this;
        addEvent("mousedown",function(){
                var evt = window.event || arguments[0];
                _self.onBeforeSelect(evt);
                clearEventBubble(evt);
        },document); 
 
        addEvent("mousemove",function(){
                var evt = window.event || arguments[0];
                _self.onSelect(evt);
                clearEventBubble(evt);
        },document); 
 
        addEvent("mouseup",function(){
                _self.onEnd();
        },document);
    } 
 
    RegionSelect.prototype.onBeforeSelect = function(evt){
         // 创建模拟 选择框
        if(!document.getElementById("selContainer")){
                 this.selectDiv = document.createElement("div");
             this.selectDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
             this.selectDiv.id = "selContainer";
             document.body.appendChild(this.selectDiv);
    }else{
         this.selectDiv = document.getElementById("selContainer");
    } 
 
    this.startX = posXY(evt).x;
    this.startY = posXY(evt).y;
    this.isSelect = true; 
 
    } 
 
    RegionSelect.prototype.onSelect = function(evt){
         var _self = this;
         if(_self.isSelect){
              if(_self.selectDiv.style.display == "none") _self.selectDiv.style.display = ""; 
 
          var posX = posXY(evt).x;
          var poxY = posXY(evt).y; 
 
          _self.selectDiv.style.left = Math.min(posX, this.startX);
             _self.selectDiv.style.top = Math.min(poxY, this.startY);
             _self.selectDiv.style.width = Math.abs(posX - this.startX);
             _self.selectDiv.style.height = Math.abs(poxY - this.startY);     
 
             var regionList = _self.regions;
             for(var i=0; i< regionList.length; i++){
                  var r = regionList[i], sr = _self.innerRegion(_self.selectDiv,r);
                  if(sr && r.className.indexOf(_self.selectedClass) == -1){
                       r.className = r.className + " "+_self.selectedClass;
                       _selectedRegions.push(r);
                  }else if(!sr && r.className.indexOf(_self.selectedClass) != -1){
                       r.className = r.className.replaceAll(_self.selectedClass,"");
                       _selectedRegions.remove(r);
                      } 
 
             }
    }
    } 
 
    RegionSelect.prototype.onEnd = function(){
        if(this.selectDiv){
             this.selectDiv.style.display = "none";
        }
        this.isSelect = false;
        //_selectedRegions = this.selectedRegion;
    } 
 
    // 判断一个区域是否在选择区内
    RegionSelect.prototype.innerRegion = function(selDiv, region){
         var s_top = parseInt(selDiv.style.top);
         var s_left = parseInt(selDiv.style.left);
         var s_right = s_left + parseInt(selDiv.offsetWidth);
         var s_bottom = s_top + parseInt(selDiv.offsetHeight); 
 
         var r_top = parseInt(region.offsetTop);
         var r_left = parseInt(region.offsetLeft);
         var r_right = r_left + parseInt(region.offsetWidth);
         var r_bottom = r_top + parseInt(region.offsetHeight); 
 
     var t = Math.max(s_top, r_top);
var r = Math.min(s_right, r_right);
var b = Math.min(s_bottom, r_bottom);
var l = Math.max(s_left, r_left); 
 
if (b > t+5 && r > l+5) {
return region;
} else {
return null;
} 
 
    } 
 
    RegionSelect.prototype.clearSelections = function(regions){
        for(var i=0; i<regions.length;i++){
            regions[i].className = regions[i].className.replaceAll(this.selectedClass,"");
        }
    } 
 
    function getSelectedRegions(){
        return     _selectedRegions;
    }
/*-------------------------------------- 区域选择方法结束 --------------------------------------------*/ 
 
    function showSelDiv(){
         var selInfo = "";
         var arr = getSelectedRegions();
         for(var i=0; i<arr.length;i++){
                   selInfo += arr[i].innerHTML+"\n";
         } 
 
         alert("共选择 "+arr.length+" 个文件，分别是：\n"+selInfo); 
 
    } 
 
        </script>
    <body>
<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>
    </body>
    <script>
new RegionSelect({
    region:'div.fileDiv',
    selectedClass: 'seled'
}).select();
    </script>
</html>

js 在页面上模拟多选，蚂蚁线线框的更多相关文章

Progress.js – 为页面上的任意对象创建进度条效果
Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...
JS 在页面上直接将json数据导出到excel，支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox
JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox <html> <head> </h ...
使用js在页面上新建文件夹
使用js在页面上新建文件夹 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
如何使用 js 检测页面上全局变量
如何使用 js 检测页面上全局变量 js 检测页面全局变量脚本 <!DOCTYPE html> <html lang="zh-Hans"> <head ...
js禁用页面上右键菜单、选中和复制
有时候我们不想页面上的内容被人复制走,那么就可以使用js对页面进行设置,禁止右键菜单.禁止选中.禁止复制等功能可以有效的达到这个效果,js代码如下所示: /** * 禁用右键菜单 */ documen ...
js检查页面上有无重复id的代码分享
用js代码检查一个页面上是否用重复的id. 方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ...
如何用JS获取页面上的所有标签
最近忙的一匹,忙着大保健,都来不及写博客,今天特意抽出点时间来写一写前两天看到一个题,是问如何从页面上获取所有的标签的并查看他们的数量,感觉还是有点意思的,所以给大家来搞一下子我们先来捋捋思路,那 ...
JS 将页面上的表格导出为 Excel 文件
如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 E ...
使用typed.js实现页面上的写字功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

横向不间断滚动DIV
横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...
linux 时间管理——概念、注意点(一)【转】
转自:http://www.cnblogs.com/openix/p/3324243.html 参考:1.http://bbs.eyeler.com/thread-69-1-1.html ...
c# 动态调用.net编写的webservices接口
创建类WebServiceHelper: public class WebServiceHelper { #region 动态调用WebService动态调用地址 /// < summary&g ...
通过jquery获取天气的方法
代码为: $.getScript('http://int.dpool.sina.com/iplookup/iplookup.php?format=js',function(_result){ if(r ...
安装AdventureWorks2008R2
在微软的网站,有介绍安装示例数据库AdventureWorks的说明. 你可以在这里下载到压缩包 (AdventureWorks2008R2_Database.zip),解压后会得到两个文件: Adv ...
描述性统计分析－用脚本将统计量函数批量化&分步骤逐一写出
计算各种描述性统计量函数脚本(myDescriptStat.R)如下: myDescriptStat <- function(x){ n <- length(x) #样本数据个数 m &l ...
android中的位置服务（LBS）
自己的位置:LocationManager 基本用法:创建实例:LocationManager locationManager = (LocationManager)getSystemService ...
Bootstrap_Javascript
弹窗一. 结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-cont ...
30.Nginx集群搭建笔记
源码安装Nginx: tar -zxvf nginx-1.8.0.tar.gz -C /nginx/ #解压Nginx rpm -ivh keepalived-1.2.13-5.el6_ ...
Linux C++线程池
.为什么需要线程池? 部分应用程序需要执行很多细小的任务,对于每个任务都创建一个线程来完成,任务完成后销毁线程,而这就会产生一个问题:当执行的任务所需要的时间T1小于等于创建线程时间T2和销毁线程时间 ...

js 在页面上模拟多选，蚂蚁线线框

js 在页面上模拟多选，蚂蚁线线框的更多相关文章

随机推荐

热门专题