コードをコピー コードは次のとおりです: <!--<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> var found = new Array;<br> var foundCount = 0;<br> for (var h = 0; h var elements;<br> if (tagName = = '*') {<br> 要素 = getAllChildren(currentContext[h]);<br> } else {<br> 要素 = currentContext[h].getElementsByTagName(tagName);<br> }<br> (var j = 0; j <elements.length j> found[foundCount ] = elements[j];<br> }<br> currentContext = new Array;<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 ] = found[k];<br> }<br> }<br> continue;<br> }<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> if (!tagName) {<br> tagName = '*';<br> } <br> var found = new Array;<br> var foundCount = 0;<br> for (var h = 0; h var 要素;<br> if (tagName == '*') {<br> 要素 = getAllChildren(currentContext[h]);<br> } else {<br> 要素 = currentContext[h] .getElementsByTagName(tagName);<br> }<br> for (var j = 0; j < elements.length; j ) {<BR> found[foundCount ] = elements[j];<BR> }<BR> }<BR> currentContext = new Array;<BR> var currentContextIndex = 0;<BR> var checkFunction; <BR> switch (attrOperator) {<BR> case '=':<BR> checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); };<BR> Break;<BR> case '~': <BR> checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\b' attrValue '\b')) ); };<BR> Break;<BR> case '|':<BR> checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^' attrValue '-?'))) ; };<BR> Break;<BR> case '^':<BR> checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); };<BR> Break;<BR> case '$': <BR> checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue 。長さ); };<BR> Break;<BR> case '*': <BR> checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); };<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 RegionalSelect(selRegionProp){<BR> this.regions =[];<BR> var _regions = document.getElementsBySelector(selRegionProp["region"]);<BR> if (_regions && _regions.length > 0){<br> var _self = this;<br> for(var i=0; i< _regions.length;i ){<BR> _regions[i].onmousedown = function( ){<BR> var evt = window.event || argument[0];<BR> if(!evt.shiftKey && !evt.ctrlKey){<BR> // 清空すべて選択样式<BR> _self.clearSelections(_regions);<BR> this.className = " "自分自身.selectedClass;<BR> // 清空selected数组,并追加当前選択中要素<BR> _selectedRegions = [];<BR> _selectedRegions.push(this);<BR> }else{ <BR> if(this. className.indexOf(_self.selectedClass) == -1){<BR> this.className = " " _self.selectedClass;<BR> _selectedRegions.push(this);<BR> }else{<BR> this.className = this.className.replaceAll(_self.selectedClass,"");<BR> _selectedRegions.remove(this);<BR> }<BR> }<BR> clearEventBubble(evt);<BR> }<BR> this.regions .push(_regions[i]);<BR> }<BR> }<BR> this.selectedClass = selRegionProp["selectedClass"];<BR> this.selectedRegion = [];<BR> this.selectDiv = null; <BR> this.startX = null;<BR> this.startY = null;<BR> }<br><br> RegionSelect.prototype.select = function(){<BR> var _self = this;<BR> addEvent ("mousedown",function(){<BR> var evt = window.event || argument[0];<BR> _self.onBeforeSelect(evt);<BR> clearEventBubble(evt);<BR> },document);<br><br> addEvent("mousemove",function(){<BR> var evt = window.event || argument[0];<BR> _self.onSelect(evt);<BR> clearEventBubble(evt);<BR> },document);<br><br> addEvent("mouseup" ,function(){<BR> _self.onEnd();<BR> },document);<BR> }<br><br> RegionSelect.prototype.onBeforeSelect = function(evt){<BR> if(!document .getElementById("selContainer")){<BR> this.selectDiv = document.createElement("div");<BR> this.selectDiv.style.cssText = "位置:絶対;幅:0px;高さ:0px;フォント-サイズ:0px;マージン:0px;パディング:0px;ボーダー:1px 破線 #0099FF;背景色:#C3D5ED;z-index:1000;フィルター:アルファ(不透明度:60);不透明度:0.6;表示:なし; ";<BR> this.selectDiv.id = "selContainer";<BR> document.body.appendChild(this.selectDiv);<BR> }else{<BR> this.selectDiv = document.getElementById("selContainer") ;<BR> }<br><br> this.startX = posXY(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 RegionalSelect({<BR> region:'div.fileDiv',<BR> selectedClass: 'seled' <BR> }).select();<BR>// ]]>