複製程式碼 程式碼如下: <!--<BR>body{padding-top:50px;padding-left:100px;padding-right:150px;}<BR> .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;}<BR> .seled{border:1px solid #ff0000;background-color:#D6DFF7;}<BR>-->// <![CDATA[<BR>Array.prototype.remove = function( item ){<BR> for( var i = 0 ; i < this.length ; i++ ){<BR> if( item == this[i] )<BR> break;<BR> }<BR> if( i == this.length )<BR> return;<BR> for( var j = i ; j < this.length - 1 ; j++ ){<BR> this[ j ] = this[ j + 1 ];<BR> }<BR> this.length--;<BR> } <br><br>String.prototype.replaceAll = function (AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g"); return this.replace(raRegExp,ARepText);}<BR> function getAllChildren(e) {<BR> return e.all ? e.all : e.getElementsByTagName('*');<BR>}</P> <P>document.getElementsBySelector = function(selector) {<BR> if (!document.getElementsByTagName) {<BR> return new Array();<BR> }<BR> var tokens = selector.split(' ');<BR> var currentContext = new Array(document);<BR> for (var i = 0; i < tokens.length; i++) {<BR> token = tokens[i].replace(/^\s+/,'').replace(/\s+$/,'');;<BR> if (token.indexOf('#') > -1) {<br> var bits = token.split('#');<br> var tagName = bits[0];<br> var id = bits[1];<br> var element = document.getElementById(id);<br> if (tagName && element.nodeName.toLowerCase() != tagName) {<br> return new Array();<br> }<br> currentContext = new Array(element);<br> continue; <br> }<br> if (token.indexOf('.') > -1) { <p> var bits = token.split('.');<br> var tagName = bits[0];<br> var className = bits[1];<br> if (!tagName) {<br> tagName = '*';<br> }</p> <p> varfound = new Array;<br> varfoundCount = 0;<br> for (var h = 0; h <currentcontext.length if> elements = getAllChildren(currentContext[h]);<br> Name(tagName);<br> }<br> for (物件j = 0 ; j <elements.length j> 找到[foundCount ] = elements[j];<br> > var currentContextIndex = 0 ;<br> for (var k = 0; k <found.length k> if (found[k].className && found[k].className.match(new RegExp('\b' className) '\b' ))) {<br> currentContext[currentContextIndex ] = find[k];<br> } if (token.match(/^( w*)[ (w )([=~|^$*]?)=?"?([^]"]*)"?]$/)) {<br> var tagName = RegExp.$1;<br> var attrName = RegExp.$2;<br> var attrOperator = RegExp.$3;<br> var attrValue = RegExp.$4;<br> 🎜> } <br> varfound = 新陣列;<br> varfoundCount = 0;<br> for (var h = 0; h＜當前Context.長度； h ) {<br> var elements;<br> if (tagName == '*') {<br>Chi if (tagName == '*') {<br>Chi if (tagName == '*') {<br>Chi 🎜> } else {<br> elements = currentContext[h] .getElementsByTagName(tagName);<br> }<br> c found[foundCount ] = elements[j];<br> }<br> }<br> currentContext = new Array;<br> var currentContextIndex = 🎜> <br> switch (attrOperator) {<br> case '=':<br> };<br> break;<br> case '~': <br> '\b')) ); };<br> break;<br> case '|':<br> trValue '-?') )) ;<br> break;<br> case '^':<br> > break;<br> case '$': <br> checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == . break ;<br> case '*': <br> checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attr) > -115;;<br> break;<br> default :<br> checkFunction = function(e) { return e.getAttribute(attrName); };<br> }<br> currentContext = new Array;<br> var currentContextIndex = 0;<br> for (var k = 0; k < found.length; k++) {<BR> if (checkFunction(found[k])) {<BR> currentContext[currentContextIndex++] = found[k];<BR> }<BR> }<BR> continue;<BR> }<BR> tagName = token;<BR> var found = new Array;<BR> var foundCount = 0;<BR> for (var h = 0; h < currentContext.length; h++) {<BR> var elements = currentContext[h].getElementsByTagName(tagName);<BR> for (var j = 0; j < elements.length; j++) {<BR> found[foundCount++] = elements[j];<BR> }<BR> }<BR> currentContext = found;<BR> }<BR> return currentContext;<BR>}<br><br> function addEvent(eventType,eventFunc,eventObj){<BR> eventObj = eventObj || document;<BR> if(window.attachEvent) eventObj.attachEvent("on"+eventType,eventFunc);<BR> if(window.addEventListener) eventObj.addEventListener(eventType,eventFunc,false);<BR> }<BR>function clearEventBubble(evt){<BR> evt = evt || window.event;<BR> if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true; <BR> if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false;<BR>}<br><br>function posXY(event){<BR> event = event || window.event;<BR> var posX = event.pageX || (event.clientX +<BR> (document.documentElement.scrollLeft || document.body.scrollLeft));<BR> var posY = event.pageY || (event.clientY +<BR> (document.documentElement.scrollTop || document.body.scrollTop));<BR> return {x:posX, y:posY};<BR>}</P><P> var _selectedRegions = [];<BR> function RegionSelect(selRegionProp){<BR> this.regions =[];<BR> var _regions = document.getElementsBySelector( ); (_regions && _regions.length > 0){<BR> var _self = this;<BR> for(var i=0; i< _regions.length;i ){<. {<BR> var evt = window.event || argument[0];<BR> if(!evt. 樣式<BR> _self.clearSelections(_regions );<BR> this.className = " " _self .selectedClass;<BR> // 🎜> _selectedRegions.push(this);<BR> }else{<BR> 如果中（此。className.indexof（_ self.selectedClass）== -1) {<splected> this. );<BR>} else {else { this.className.replaceAll(_self.selectedClass,"");<BR> }<BR> clearEventBubble(evt); <BR> }<BR> this.regions .push(_regions[i]);<BR> }<>sel this.selectedRegion = [] ;<BR> this.selectDiv = null; <BR> this.startX = null;<BR> this.startY = null;<BR> }<BR><BR> . > var _self = this;<BR> addEvent ("mousedown",function(){<BR> var evt = window.event ||參數[0];<BR> evt);<BR> },document);<BR><BR> addEvent("mousemove",function(){<BR> var evt = window.event || 參數[0];<BR> evt);<BR> clearEventBubble(evt);<BR> },document);<BR><br> addEvent("mouseup" ,function(){<br> );<BR> }<BR><BR> RegionSelect.prototype.onBeforeSelect = function(evt){<BR> if(!document .getElementById("selContainer")){<BR>thislect. "div");<BR> this.selectDiv.style.cssText = "位置:絕對;寬度:0px;高度:0px;字體-尺寸：0px；邊距：0px；填滿：0px；邊框：1px虛線#0099FF ；背景顏色：#C3D5ED；z-index：1000；濾鏡：alpha（不透明度：60）；不透明度：0.6；顯示：無； ";<br> this.selectDiv.id = "selContainer";<br> document.body.appendChild(this.selectDiv);<BR> }else{<BR> this.selectDiv = document.getElementById("selContainer") ;<<h; evt).x;<BR> this.startY = posXY(evt).y;<BR> this.isSelect = true;<br><br> }<br><br> RegionSelect.prototype.onSelect = function(evt){<BR> var _self = this;<BR> if(_self.isSelect){<BR> if(_self.selectDiv.style.display == "none") _self.selectDiv.style.display = "";<br><br> var posX = posXY(evt).x;<BR> var poxY = posXY(evt).y;<br><br> _self.selectDiv.style.left = Math.min(posX, this.startX);<BR> _self.selectDiv.style.top = Math.min(poxY, this.startY);<BR> _self.selectDiv.style.width = Math.abs(posX - this.startX);<BR> _self.selectDiv.style.height = Math.abs(poxY - this.startY); <br><br> var regionList = _self.regions;<BR> for(var i=0; i< regionList.length; i++){<BR> var r = regionList[i], sr = _self.innerRegion(_self.selectDiv,r);<BR> if(sr && r.className.indexOf(_self.selectedClass) == -1){<BR> r.className = r.className + " "+_self.selectedClass; <BR> _selectedRegions.push(r);<BR> }else if(!sr && r.className.indexOf(_self.selectedClass) != -1){<BR> r.className = r.className.replaceAll(_self.selectedClass,"");<BR> _selectedRegions.remove(r);<BR> }<br><br> }<BR> }<BR> }<br><br> RegionSelect.prototype.onEnd = function(){<BR> if(this.selectDiv){<BR> this.selectDiv.style.display = "none"; <BR> }<BR> this.isSelect = false;<BR> //_selectedRegions = this.selectedRegion;<BR> }<br><br> // 判断一个区域是否在选择区内<BR> RegionSelect.prototype.innerRegion = function(selDiv, region){<BR> var s_top = parseInt(selDiv.style.top);<BR> var s_left = parseInt(selDiv.style.left);<BR> var s_right = s_left + parseInt(selDiv.offsetWidth);<BR> var s_bottom = s_top + parseInt(selDiv.offsetHeight);<br><br> var r_top = parseInt(region.offsetTop);<BR> var r_left = parseInt(region.offsetLeft);<BR> var r_right = r_left + parseInt(region.offsetWidth);<BR> var r_bottom = r_top + parseInt(region.offsetHeight);<br><br> var t = Math.max(s_top, r_top);<BR> var r = Math.min(s_right, r_right);<BR> var b = Math.min(s_bottom, r_bottom);<BR> var l = Math.max(s_left, r_left);<br><br> if (b > t+5 && r > l+5) {<br> return region;<br> } else {<br> return null;<br> }<br><br> }<br><br> RegionSelect.prototype.clearSelections = function(regions){<br> for(var i=0; i<regions.length;i++){<BR> regions[i].className = regions[i].className.replaceAll(this.selectedClass,"");<BR> }<BR> }<br><br> function getSelectedRegions(){<BR> return _selectedRegions;<BR> }</P> <P> function showSelDiv(){<BR> var selInfo = "";<BR> var arr = getSelectedRegions();<BR> for(var i=0; i<arr.length;i++){<BR> selInfo += arr[i].innerHTML+"\n";<BR> }</P> <P> alert("共选择 "+arr.length+" 个文件，分别是：\n"+selInfo);<br><br> }<BR>// ]]>getRegionsfile1file2file3file4file5file6file7file8getRegions// <![CDATA[<BR>new RegionSelect({<BR> Region:'div.fileDiv',<BR> sellectedClass: ' }).select();<BR>// ]]>
