在网页中用鼠标+ctrl复选表格或者直接反选代码,JS代码库,德仔网

代码语言
代码分类
【JS】在网页中用鼠标+ctrl复选表格或者直接反选
作者:bacteroid / 发布于2014/7/2/ 782

	<html>
	 <head>
	 <title>另类的全选/反选效果</title>
	 <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 #eeeeee;margin-right:10px;margin-bottom:10px;}
	 .seled{border:1px solid #ff0000;background-color:#D6DFF7;}
	 </style>
	 <script type="text/javascript">
	 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;
	 }
	 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>
	 </head>
	 <body>
	 <button onclick="showSelDiv();">点击查看你选择的文件</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 style="float:left;width:100%;"><button onclick="showSelDiv();">点击查看你选择的文件</button></div>
	 </body>
	 <script>
	 new RegionSelect({
	 region:'div.fileDiv',
	 selectedClass: 'seled'
	 }).select();
	 </script>
	 </html>
试试其它关键字
　复选表格　　接反选　
同语言下
可能有用的
bacteroid贡献的其它代码(12)