Advanced Search

Listas desplegables editables (Selects editables)

/ Published in: JavaScript
Save to your folder(s)
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()".

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. El código para crear el select es bien sencillo, ya que está encapsulado en un objeto:
  2.  
  3. var opciones = new Selector("ejemplo","divID",100,funcionDeRetorno,["","ESTO","ES","UN","SELECTOR","QUE","PERMITE","INPUT","DE","TEXTO"]); 
  4.  
  5. Como veis, el objeto requiere de 5 argumentos, dos de los cuales son opcionales:
  6.  
  7. Nombre del campo: aquí especificamos el "name" del select, de forma que luego desde el form nos llegue la info correctamente. 
  8. ID de la capa: esta ID nos servirá para luego posicionar la capa o bien darle estilos. 
  9. Ancho: el ancho del select. 
  10. 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. 
  11. Valores: en formato de array, se tienen que pasar los valores que se utilizarán en el select. Este argumento tambien es opcional. 
  12.  
  13. 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.
  14.  
  15. El código que hace funcionar todo esto es:
  16.  
  17. Selector = function(padre,id,ancho,callback,opt){
  18. 	this.div = document.createElement("div");
  19. 	var div = this.div;
  20. 		div.style.position = "relative";
  21. 		div.style.width = ancho + "px";
  22. 		div.style.cssFloat = "left";
  23. 		div.style.styleFloat = "left";
  24. 		div.id = "selector-div-" + id;
  25. 	this.inp = document.createElement("input");
  26. 	var inp = this.inp;
  27. 		inp.style.zIndex = 2;
  28. 		inp.style.width = (ancho-18) + "px";
  29. 		inp.style.clip = "rect(0px "+ (ancho - 18) +"px 25px 0px)";
  30. 		inp.id = "selector-input-" + id;
  31. 		inp.name = id;
  32. 		inp.parent=this;
  33. 		inp.onkeyup=function(e){
  34. 			if(!e){var e=window.event;}
  35. 			if(e.keyCode==13){
  36. 				this.parent.setValor(this.value,this.value);
  37. 				this.parent.sel.value = this.value;
  38. 				this.parent.sel.$onchange(this.parent.sel);
  39. 			}
  40. 		}
  41. 	this.sel = document.createElement("select");
  42. 	var sel = this.sel;
  43. 		sel.style.zIndex = 1;
  44. 		sel.style.width = ancho + "px";
  45. 		sel.style.clip = "rect(0px " + ancho + "px 25px 82px)";
  46. 		sel.id = "selector-select-" + id;
  47. 		sel.parent=this;
  48. 		sel.onchange=function(){
  49. 			this.parent.inp.value=this.value;
  50. 			this.$onchange(this);
  51. 		}
  52. 		inp.style.position = sel.style.position = "absolute";
  53. 		inp.style.top = sel.style.top = 0;
  54. 		inp.style.left = sel.style.left = 0;
  55.  
  56. 	if(typeof callback == "function"){
  57. 		sel.callback =callback;
  58. 		sel.$onchange=function(e){e.callback(e.value);}
  59. 	}
  60.  
  61. 	try{
  62. 		for(var i=0;i<opt.length;i++){
  63. 			this.setValor(opt[i],opt[i]);
  64. 		}
  65. 	}catch(e){}
  66.  
  67. 	div.appendChild(inp);
  68. 	div.appendChild(sel);
  69. 	document.getElementById(padre).appendChild(div);
  70. };
  71. Selector.prototype.setValor=function(label,value){
  72. 	this.sel.options[this.sel.options.length] = new Option(label,value);
  73. }

URL: http://www.nbsp.es/2006/08/15/xhtml-select-con-input-incluido/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.