Revision: 875
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at August 16, 2006 23:49 by ppalli
Initial Code
El código para crear el select es bien sencillo, ya que está encapsulado en un objeto: var opciones = new Selector("ejemplo","divID",100,funcionDeRetorno,["","ESTO","ES","UN","SELECTOR","QUE","PERMITE","INPUT","DE","TEXTO"]); Como veis, el objeto requiere de 5 argumentos, dos de los cuales son opcionales: Nombre del campo: aquà especificamos el "name" del select, de forma que luego desde el form nos llegue la info correctamente. ID de la capa: esta ID nos servirá para luego posicionar la capa o bien darle estilos. Ancho: el ancho del select. Función de retorno: es la función que se lanza cada vez que se selecciona una opción o bien cuando se introduce una nueva opción y se preciona "enter", este argumento es opcional. Valores: en formato de array, se tienen que pasar los valores que se utilizarán en el select. Este argumento tambien es opcional. Como he comentado, los dos últimos argumentos son opcionales, pero si queremos definir unos valores y no queremos definir una función de retorno, solo tenemos que introducir "null" o "false" en el lugar de la función de retorno. El código que hace funcionar todo esto es: Selector = function(padre,id,ancho,callback,opt){ this.div = document.createElement("div"); var div = this.div; div.style.position = "relative"; div.style.width = ancho + "px"; div.style.cssFloat = "left"; div.style.styleFloat = "left"; div.id = "selector-div-" + id; this.inp = document.createElement("input"); var inp = this.inp; inp.style.zIndex = 2; inp.style.width = (ancho-18) + "px"; inp.style.clip = "rect(0px "+ (ancho - 18) +"px 25px 0px)"; inp.id = "selector-input-" + id; inp.name = id; inp.parent=this; inp.onkeyup=function(e){ if(!e){var e=window.event;} if(e.keyCode==13){ this.parent.setValor(this.value,this.value); this.parent.sel.value = this.value; this.parent.sel.$onchange(this.parent.sel); } } this.sel = document.createElement("select"); var sel = this.sel; sel.style.zIndex = 1; sel.style.width = ancho + "px"; sel.style.clip = "rect(0px " + ancho + "px 25px 82px)"; sel.id = "selector-select-" + id; sel.parent=this; sel.onchange=function(){ this.parent.inp.value=this.value; this.$onchange(this); } inp.style.position = sel.style.position = "absolute"; inp.style.top = sel.style.top = 0; inp.style.left = sel.style.left = 0; if(typeof callback == "function"){ sel.callback =callback; sel.$onchange=function(e){e.callback(e.value);} } try{ for(var i=0;i<opt.length;i++){ this.setValor(opt[i],opt[i]); } }catch(e){} div.appendChild(inp); div.appendChild(sel); document.getElementById(padre).appendChild(div); }; Selector.prototype.setValor=function(label,value){ this.sel.options[this.sel.options.length] = new Option(label,value); }
Initial URL
http://www.nbsp.es/2006/08/15/xhtml-select-con-input-incluido/
Initial Description
Hace tiempo hice un clon del dreamweaver en html y javascript, que te permitia editar una página web online, el tema es que podÃas seleccionar un enlace (de entre otras cosas) y te aparecÃan las opciones en el panel de propiedades, con lo que podÃas seleccionar una opción de un select (por ejemplo el target) y se actualizaba solo el código html. Bien, el problema vino cuando intenté configurar una opción igual que la del dreamweaver, que me permitiera añadir valores al select, en un principio no super como hacerlo pero al final, despues de surfear por la red encontré la solución a mis problemas: "clip:rect()".
Initial Title
Listas desplegables editables (Selects editables)
Initial Tags
Initial Language
JavaScript