复制代码代码如下:
<estilo><!--
cuerpo{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: 10 píxeles;}
.seled{borde:1px sólido #ff0000;color de fondo:#D6DFF7;}
--></estilo>
<script type="text/javascript">// <![CDATA[
Array.prototype.remove = función (elemento) {
for( var i = 0 ; i < this.length ; i++ ){
si (artículo == esto [i])
romper;
}
si (i == esta.longitud)
devolver;
for( var j = i ; j < this.length - 1 ; j++ ){
esto[j] = esto[j + 1];
}
esta.longitud--;
}
String.prototype.replaceAll = function (AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g"); devolver this.replace(raRegExp,ARepText);}
función getAllChildren(e) {
devolver e.all? e.all: e.getElementsByTagName('*');
}
document.getElementsBySelector = función(selector) {
si (!document.getElementsByTagName) {
devolver nueva matriz();
}
var tokens = selector.split(' ');
var currentContext = nueva matriz (documento);
for (var i = 0; i < tokens.length; i++) {
token = tokens[i].replace(/^/s+/,'').replace(//s+$/,'');;
si (token.indexOf('#') > -1) {
var bits = token.split('#');
var nombre de etiqueta = bits[0];
var id = bits[1];
elemento var = document.getElementById(id);
if (nombre de etiqueta && elemento.nombredenodo.toLowerCase() != nombre de etiqueta) {
devolver nueva matriz();
}
currentContext = nueva matriz (elemento);
continuar;
}
si (token.indexOf('.') > -1) {
var bits = token.split('.');
var nombre de etiqueta = bits[0];
var nombre de clase = bits[1];
si (! nombre de etiqueta) {
Nombre de etiqueta = '*';
}
var encontrado = nueva matriz;
var recuento encontrado = 0;
for (var h = 0; h < currentContext.length; h++) {
elementos var;
if (nombre de etiqueta == '*') {
elementos = getAllChildren(currentContext[h]);
} demás {
elementos = currentContext[h].getElementsByTagName(tagName);
}
for (var j = 0; j < elementos.longitud; j++) {
encontrado[foundCount++] = elementos[j];
}
}
currentContext = nueva matriz;
var currentContextIndex = 0;
for (var k = 0; k < longitud.encontrada; k++) {
if (found[k].className && found[k].className.match(new RegExp('//b'+className+'//b'))) {
currentContext[currentContextIndex++] = encontrado[k];
}
}
continuar;
}
if (token.match(/^(/w*)/[(/w+)([=~/|/^/$/*]?)=?"?([^/]"]*)"?/ ]$/)) {
var nombre de etiqueta = RegExp.$1;
var nombreatributo = RegExp.$2;
var attrOperator = RegExp.$3;
var attrValue = RegExp.$4;
si (! nombre de etiqueta) {
Nombre de etiqueta = '*';
}
var encontrado = nueva matriz;
var recuento encontrado = 0;
for (var h = 0; h < currentContext.length; h++) {
elementos var;
if (nombre de etiqueta == '*') {
elementos = getAllChildren(currentContext[h]);
} demás {
elementos = currentContext[h].getElementsByTagName(tagName);
}
for (var j = 0; j < elementos.longitud; j++) {
encontrado[foundCount++] = elementos[j];
}
}
currentContext = nueva matriz;
var currentContextIndex = 0;
var función de verificación;
cambiar (atributoOperador) {
caso '=':
checkFunction = función(e) { return (e.getAttribute(attrName) == attrValue); };
romper;
caso '~':
checkFunction = función(e) { return (e.getAttribute(attrName).match(new RegExp('//b'+attrValue+'//b'))); };
romper;
caso '|':
checkFunction = función(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); };
romper;
caso '^':
checkFunction = función(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); };
romper;
caso '$':
checkFunction = función(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); };
romper;
caso '*':
checkFunction = función(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); };
romper;
por defecto :
checkFunction = función(e) { return e.getAttribute(attrName); };
}
currentContext = nueva matriz;
var currentContextIndex = 0;
for (var k = 0; k < longitud.encontrada; k++) {
if (checkFunction(encontrado[k])) {
currentContext[currentContextIndex++] = encontrado[k];
}
}
continuar;
}
nombre de etiqueta = token;
var encontrado = nueva matriz;
var recuento encontrado = 0;
for (var h = 0; h < currentContext.length; h++) {
elementos var = currentContext[h].getElementsByTagName(tagName);
for (var j = 0; j < elementos.longitud; j++) {
encontrado[foundCount++] = elementos[j];
}
}
contextoactual = encontrado;
}
devolver contexto actual;
}
función agregarEvento (tipo de evento, función de evento, objeto de evento) {
eventoObj = eventoObj || documento;
if(window.attachEvent) eventObj.attachEvent("on"+eventType,eventFunc);
if(window.addEventListener) eventObj.addEventListener(eventType,eventFunc,false);
}
función clearEventBubble(evt){
evt = evt || ventana.evento;
si (evt.stopPropagation) evt.stopPropagation(); de lo contrario evt.cancelBubble = verdadero;
si (evt.preventDefault) evt.preventDefault(); de lo contrario evt.returnValue = false;
}
función posXY(evento){
evento = evento || ventana.evento;
var posX = evento.páginaX || (evento.clienteX +
(document.documentElement.scrollLeft || document.body.scrollLeft));
var posY = evento.páginaY || (evento.clienteY +
(document.documentElement.scrollTop || document.body.scrollTop));
devolver {x:posX, y:posY};
}
var _selectedRegions = [];
función RegionSelect(selRegionProp){
this.regions =[];
var _regions = document.getElementsBySelector(selRegionProp["región"]);
if(_regions && _regions.length > 0){
var _self = esto;
for(var i=0; i< _regions.length;i++){
_regions[i].onmousedown = función(){
var evt = ventana.evento || argumentos[0];
si(!evt.shiftKey && !evt.ctrlKey){
// 清空所有seleccionar样式
_self.clearSelections(_regions);
this.className += " "+_self.selectedClass;
// 清空seleccionado数组，并加入当前seleccione中的元素
_regiones seleccionadas = [];
_selectedRegions.push(esto);
}demás{
if(this.className.indexOf(_self.selectedClass) == -1){
this.className += " "+_self.selectedClass;
_selectedRegions.push(esto);
}demás{
this.className = this.className.replaceAll(_self.selectedClass,"");
_selectedRegions.remove(esto);
}
}
clearEventBubble(evt);
}
this.regions.push(_regions[i]);
}
}
this.selectedClass = selRegionProp["selectedClass"];
this.región seleccionada = [];
this.selectDiv = nulo;
this.startX = nulo;
this.startY = nulo;
}
RegionSelect.prototype.select = función(){
var _self = esto;
addEvent("mousedown",función(){
var evt = ventana.evento || argumentos[0];
_self.onBeforeSelect(evt);
clearEventBubble(evt);
},documento);
addEvent("mousemouse",función(){
var evt = ventana.evento || argumentos[0];
_self.onSelect(evt);
clearEventBubble(evt);
},documento);
addEvent("mouseup",función(){
_self.onEnd();
},documento);
}
RegionSelect.prototype.onBeforeSelect = función(evt){
if(!document.getElementById("selContainer")){
this.selectDiv = document.createElement("div");
this.selectDiv.style.cssText = "posición:absoluta;ancho:0px;alto:0px;font-size:0px;margen:0px;padding:0px;border:1px discontinuo #0099FF;color de fondo:#C3D5ED;índice z:1000;filtro:alfa(opacidad:60);opacidad:0.6;pantalla:ninguna;";
this.selectDiv.id = "selContainer";
document.body.appendChild(this.selectDiv);
}demás{
this.selectDiv = document.getElementById("selContainer");
}
this.startX = posXY(evt).x;
this.startY = posXY(evt).y;
this.isSelect = verdadero;
}
RegionSelect.prototype.onSelect = función(evt){
var _self = esto;
si(_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< listaregión.longitud; i++){
var r = listaregión[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 = función(){
si(this.selectDiv){
this.selectDiv.style.display = "ninguno";
}
this.isSelect = falso;
//_selectedregions = this.selectedregion;
}
// 判断一个区域是否在选择区内
RegionSelect.prototype.innerRegion = función(selDiv, región){
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);
si (b > t+5 && r > l+5) {
región de retorno;
} demás {
devolver nulo;
}
}
RegionSelect.prototype.clearSelections = función(regiones){
for(var i=0; i<regiones.longitud;i++){
regiones[i].className = regiones[i].className.replaceAll(this.selectedClass,"");
}
}
función obtener Regiones Seleccionadas(){
devolver _regiones seleccionadas;
}
función mostrarSelDiv(){
var selInfo = "";
var arr = getSelectedRegions();
for(var i=0; i<arr.length;i++){
selInfo += arr[i].innerHTML+"/n";
}
alert("共选择 "+arr.length+" 个文件，分别是：/n"+selInfo);
}
// ]]></script>
<p><button onclick="showSelDiv();">obtener Regiones</button></p>
<div>archivo1</div>
<div>archivo2</div>
<div>archivo3</div>
<div>archivo4</div>
<div>archivo5</div>
<div>archivo6</div>
<div>archivo7</div>
<div>archivo8</div>
<div style="float: left; width: 100%;"><button onclick="showSelDiv();">getRegions</button></div>
<script type="text/javascript">// <![CDATA[
nueva Selección de Región({
región:'div.fileDiv',
Clase seleccionada: 'seleccionada'
}).seleccionar();
// ]]></script>