/** * Framework de Intelligent Checkboxes * * @author Thiago de Andrade Souza * @copyright Thiago de Andrade Souza * @e-mail thiagoh@gmail.com * @date 27/05/2006 * @comment Framework de Intelligent Checkboxes em Javascript * Procedimentos de uso: * - importar os arquivos necessarios * * - na tag body chamar uma funcao no evento onLoad que ira montar o array de checkboxes e instanciar um objeto da classe IntelligentCheckBoxes. Exemplo: // funcao que carrega o array e instancia o objeto function carrega(){ array = new Array(); f = document.forms[0]; array = new Array(); for(i = 0; i < f.elements.length; i++) if(f.elements[i].type == "checkbox") array.push(f.elements[i]) int = new IntelligentCheckBoxes(array); } // tag body chamando carrega() no onLoad * Obs: * - também é possivel usar a funcionalidade para mais de um bloco de checkboxes, basta instanciar outro objeto da classe Exemplo: // funcao que carrega o array e instancia o objeto function carrega(){ array = new Array(); f = document.forms[0]; // PRIMEIRO FORMULARIO array = new Array(); for(i = 0; i < f.elements.length; i++) if(f.elements[i].type == "checkbox") array.push(f.elements[i]) int = new IntelligentCheckBoxes(array); // OBJETO DO BLOCO DE CHECKBOXES 1 f = document.forms[1]; // SEGUNDO FORMULARIO array = new Array(); for(i = 0; i < f.elements.length; i++) if(f.elements[i].type == "checkbox") array.push(f.elements[i]) int2 = new IntelligentCheckBoxes(array); // OBJETO DO BLOCO DE CHECKBOXES 2 } // tag body chamando carrega() no onLoad */ IntelligentCheckBoxes = function(arrayCheckboxes){ this.arrayCheckboxes = arrayCheckboxes; this.shiftKeyPressed = false; this.ctrlKeyPressed = false; this.lastClicked = null; this.firstClicked = null; this.preload(); document.IntelligentCheckBoxes = this; addEvent(document, document.IntelligentCheckBoxes.presskey, 'keydown'); addEvent(document, document.IntelligentCheckBoxes.releasekey, 'keyup'); } IntelligentCheckBoxes.prototype.preload = function(){ for(i = 0; i < this.arrayCheckboxes.length; i++){ this.arrayCheckboxes[i].IntelligentCheckBoxes = this; addEvent(this.arrayCheckboxes[i], this.arrayCheckboxes[i].IntelligentCheckBoxes.markCheckBoxes, 'click'); } } IntelligentCheckBoxes.prototype.presskey = function(e){ element = getTarget(getEvento(e)); $this = element.IntelligentCheckBoxes key = getASCII(getEvento(e)); if(key == 16) $this.shiftKeyPressed = true; else if(key == 17) $this.ctrlKeyPressed = true; } IntelligentCheckBoxes.prototype.releasekey = function(e){ element = getTarget(getEvento(e)); $this = element.IntelligentCheckBoxes key = getASCII(getEvento(e)); if(key == 16) $this.shiftKeyPressed = false; else if(key == 17) $this.ctrlKeyPressed = false; } IntelligentCheckBoxes.prototype.markCheckBoxes = function(e){ element = getTarget(getEvento(e)); $this = element.IntelligentCheckBoxes // como o evento onclick registra o evento depois q o clique registra-se a flag wasNotChecked wasNotChecked = element.checked; array = $this.arrayCheckboxes; $this.firstChecked = $this.lastClicked; // o primeiro checado sempre vai ser o anterior ao ultimo clicado $this.lastClicked = $this.getIndexCheckBox(element, array); //alert(lastClicked) if($this.firstChecked == $this.lastClicked) return false; if($this.shiftKeyPressed){ if($this.firstChecked < $this.lastClicked){ maior = $this.lastClicked; menor = $this.firstChecked; }else{ maior = $this.firstChecked; menor = $this.lastClicked; } if(wasNotChecked){ for(i = 0; i < array.length; i++) if(i >= menor && i <= maior) array[i].checked = true; }else{ for(i = 0; i < array.length; i++) if(i >= menor && i <= maior){ array[i].checked = false; } } } } IntelligentCheckBoxes.prototype.getIndexCheckBox = function(checkbox, array){ for(i = 0; i < array.length; i++) if(array[i] == checkbox) return i; return -1; } function getTarget(e){ if(e.target) return e.target; else return e.srcElement; } function getEvento(e){ if(document.all) return event; else return e; } function getASCII(e){ if(document.all) return e.keyCode; else return e.which; } function ge(id){ return document.getElementById(id); } function addEvent(elemento, funcao, evento){ if(document.all){ elemento.attachEvent('on'+evento,funcao,false); elemento.attachEvent('on'+evento,funcao,false); }else{ elemento.addEventListener(evento,funcao,false); elemento.addEventListener(evento,funcao,false) } }