Ver Mensaje Individual
  #29 (permalink)  
Antiguo 03/04/2010, 18:05
ImNoob007
 
Fecha de Ingreso: octubre-2007
Mensajes: 8
Antigüedad: 16 años, 6 meses
Puntos: 0
Formulario Dinámico en javascript PARTE1

[URL="http://img239.imagevenue.com/img.php?image=40609_FORMULARIO_122_335lo.jpg"]http://img239.imagevenue.com/img.php?image=40609_FORMULARIO_122_335lo.jpg[/URL]

Código Javascript:
Ver original
  1. //PREFIJOS:
  2. //
  3. //ar=acronimo de array
  4. //b=acronimo de Boolean;
  5. //i= " de integer
  6. //s= " de string
  7. //o= " de objeto
  8. //e=elemento de DOM
  9. //p=procedimiento (en POO llamado metodo)
  10. //f=funcion o float
  11. //frm=formulario
  12. //div=Div
  13. //hid=Hidden
  14. //txt=Text
  15. //
  16. //**************************************************************
  17. //***********ZONA DE PARAMETROS DE LOS OBJETOS *****************//
  18. //**************************************************************
  19. ////Estas son las propiedades basicas para crear los elementos.
  20. //si quieres las puedes cambiar para ver el efecto que tienen
  21. //
  22. //arDIVFONDO: Son los parametros para el Div de fondo que evitara interaccionar con
  23. //los elementos (controles) que hay detras.  Los que programan en .NET es el
  24. //equivalente a la opcion MODAL del formulario.
  25. var arDIVFONDO=new Array();
  26. arDIVFONDO['id']="divFondo";
  27. arDIVFONDO['Alto']="0px";
  28. arDIVFONDO['Ancho']="0px";
  29. arDIVFONDO['ColorFondo']="#000";
  30. arDIVFONDO['Opacidad']=".5";
  31. arDIVFONDO['Filtro']="alpha(opacity=50)";
  32. arDIVFONDO['Posicion']="absolute";
  33. arDIVFONDO['z']="1";
  34. arDIVFONDO['y']="0px";
  35. arDIVFONDO['x']="0px";
  36. arDIVFONDO['Padding']="0px";
  37.  
  38. //arDIVFORM: Contenedor del formulario ojo con z pq su padre no es el arDIVFONDO
  39. //si fuera asi, todo se veria con opacidad asi que este, esta encima con z=2
  40. var arDIVFORM=new Array();
  41. arDIVFORM['id']="divForm";
  42. arDIVFORM['Alto']="55px";
  43. arDIVFORM['Ancho']="499px";
  44. arDIVFORM['ColorFondo']="white";
  45. arDIVFORM['Opacidad']=".99";
  46. arDIVFORM['Filtro']="alpha(opacity=100)";
  47. arDIVFORM['Posicion']="absolute";
  48. arDIVFORM['z']="2";
  49. arDIVFORM['y']="0px";
  50. arDIVFORM['x']="0px";
  51. arDIVFORM['Padding']="10px";
  52.  
  53. //arFORM: Los atributos del formulario que ira dentro de divForm
  54. var arFORM=new Array();
  55. arFORM['id']="frmEditar";
  56. arFORM['Nombre']="frmEditar";
  57. arFORM['Metodo']="post";
  58. arFORM['Accion']="contacto.php";
  59. arFORM['Alto']="auto";
  60. arFORM['Ancho']="auto";
  61. arFORM['ColorFondo']="auto";
  62. arFORM['Posicion']="relative";
  63. arFORM['z']="2";
  64. arFORM['y']="0px";
  65. arFORM['x']="0px";
  66. arFORM['Padding']="0";
  67.  
  68. //arTabla: La tabla que utilizare para ordenar los controles
  69. //se que esto no cumple con W3C Strict, pero si me ponia con fieldset se me
  70. //iba hacer muy largo. 2Filas una la cabecera y otra con los controles
  71. var arTABLA=new Array();
  72. arTABLA['id']="tabDetalles";
  73. arTABLA['Filas']=2;
  74. arTABLA['Columnas']=5;
  75. arTABLA['Alto']="auto";
  76. arTABLA['Ancho']="auto";
  77. arTABLA['ColorFondo']="auto";
  78. arTABLA['Posicion']="relative";
  79. arTABLA['z']="2";
  80. arTABLA['y']="0px";
  81. arTABLA['x']="0px";
  82. arTABLA['Borde']="1px solid red";
  83.  
  84. //arHIDDEN: Mi campo hidden necesario para enviarlo con POST y capturarlo con
  85. //PHP
  86. var arHIDDEN=new Array();
  87. arHIDDEN['Tipo']="hidden";
  88. arHIDDEN['id']="hidFila";
  89. arHIDDEN['Nombre']="hidFila";
  90. arHIDDEN['Valor']="5";          //Modificar, es el campo clave del registro
  91.  
  92. //arTXTCONCEP: Campo de texto "CONCEPTO"
  93. var arTXTCONCEP=new Array();
  94. arTXTCONCEP['Tipo']="text";
  95. arTXTCONCEP['id']="txtConcep";
  96. arTXTCONCEP['Nombre']="txtConcep";
  97. arTXTCONCEP['Valor']="Diseño de tarjetas + impresion";  //Modificar
  98. arTXTCONCEP['Ancho']="250px";
  99.  
  100. //arTXTCONCEP: Campo de texto "CANTIDAD"
  101. var arTXTCANT=new Array();
  102. arTXTCANT['Tipo']="text";
  103. arTXTCANT['id']="txtCant";
  104. arTXTCANT['Nombre']="txtCant";
  105. arTXTCANT['Valor']=" 300,00 ";  //Modificar
  106. arTXTCANT['Ancho']="70px";
  107.  
  108. //arBOTCANCELAR: Sirve para destruir las dos capas y permite seguir interactuando
  109. //con el formulario original
  110. var arBOTCANCELAR=new Array();
  111. arBOTCANCELAR['Tipo']="button";
  112. arBOTCANCELAR['id']="botCancelar";
  113. arBOTCANCELAR['Nombre']="botCancelar";
  114. arBOTCANCELAR['Valor']="Cancelar";
  115. arBOTCANCELAR['Ancho']="auto";
  116.  
  117. //arSUBACEPTAR: Sirve para enviar la informacion del formulario. (El submit de toda la vida).
  118. var arSUBACEPTAR=new Array();
  119. arSUBACEPTAR['Tipo']="submit";
  120. arSUBACEPTAR['id']="subAceptar";
  121. arSUBACEPTAR['Nombre']="subAceptar";
  122. arSUBACEPTAR['Valor']="Aceptar";
  123. arSUBACEPTAR['Ancho']="auto";
  124.  
  125. //**************************************************************
  126. //**************  FIN ZONA DE PARAMETROS  ********************//
  127. //**************************************************************
  128.  
  129. //--- AQUI EMPIEZA LO BUENO -- //
  130.  
  131. //VARIABLES "GLOBALES" (por lo de la G ;0)
  132. var oGVentana=null;   //Pq "o"? pq esta clase no gestiona ningun elemento DOM
  133. var eGDivFondo=null;
  134. var eGDivForm=null;
  135. var eGFormulario=null;
  136. var eGTabla=null;
  137. var eGHidFila=null;
  138. var eGTxtConcep=null;
  139. var eGTxtCant=null;
  140. var eGbotCancelar=null;
  141. var eGSubAceptar=null;
  142.  
  143. var bGFrmCreado=false;
  144.  
  145.  
  146. //CLASE VENTANA
  147. function CVentana()
  148. {
  149.     var iAltura = 0; // height
  150.     var iAnchura = 0; // width
  151.  
  152.     var pCalculaTamano=function()
  153.     {
  154.         if( typeof( window.innerHeight ) == 'number' )
  155.         {
  156.             iAltura = window.innerHeight;
  157.             iAnchura = window.innerWidth;
  158.         }
  159.         else if( document.body && document.body.clientHeight )
  160.         {
  161.             //IE 4 o superior
  162.             iAltura = document.body.clientHeight;
  163.             iAnchura = document.body.clientWidth;
  164.         }
  165.     }
  166.  
  167.     pCalculaTamano();
  168.     this.iAncho=iAnchura;
  169.     this.iAlto=iAltura;
  170.  
  171.     this.getAncho=function()
  172.     {
  173.         return this.iAncho+"px";
  174.     }
  175.     this.getAlto=function()
  176.     {
  177.         return this.iAlto+"px";
  178.     }
  179. }
  180.  
  181. //CLASE FONDO
  182. //sIdPadre es el ID del div donde se insertara este, si se pasa null el padre
  183. //sera document.body
  184. function CDiv(arDiv, sIdPadre)
  185. {
  186.     var ePadre=document.body;
  187.     this.eDiv=document.createElement('div');
  188.  
  189.     with(this.eDiv)
  190.     {
  191.         id=arDiv['id'];
  192.         style.height=arDiv['Alto'];
  193.         style.width=arDiv['Ancho'];
  194.         style.backgroundColor=arDiv['ColorFondo'];
  195.         style.opacity=arDiv['Opacidad'];
  196.         style.filter=arDiv['Filtro'];//PARA IE
  197.         style.position=arDiv['Posicion'];
  198.         style.zIndex=arDiv['z'];
  199.         style.top=arDiv['y'];
  200.         style.left=arDiv['x'];
  201.         style.padding=arDiv['Padding'];
  202.     }
  203.  
  204.     if(sIdPadre==null)
  205.     {
  206.         ePadre.appendChild(this.eDiv);
  207.     }
  208.     else
  209.     {
  210.         ePadre=document.getElementById(sIdPadre);
  211.         ePadre.appendChild(this.eDiv);
  212.     }
  213.  
  214.     //GETS
  215.     this.getID=function()
  216.     {
  217.         return this.eDiv.id;
  218.     }
  219.     this.getWidth=function()
  220.     {
  221.         return this.eDiv.offsetWidth;
  222.     }
  223.  
  224.     this.getHeight=function()
  225.     {
  226.         return this.eDiv.offsetHeight;
  227.     }
  228.  
  229.     this.getTop=function()
  230.     {
  231.         return this.eDiv.offsetTop;
  232.     }
  233.  
  234.     this.getLeft=function()
  235.     {
  236.         return this.eDiv.offsetLeft;
  237.     }
  238.  
  239.     //SETS
  240.     this.setWidth=function(sValor)
  241.     {
  242.         this.eDiv.style.width=sValor;
  243.     }
  244.  
  245.     this.setHeight=function(sValor)
  246.     {
  247.         this.eDiv.style.height=sValor;
  248.     }
  249.  
  250.     this.setTop=function(sValor)
  251.     {
  252.         this.eDiv.style.top=sValor;
  253.     }
  254.  
  255.     this.setLeft=function(sValor)
  256.     {
  257.         this.eDiv.style.left=sValor;
  258.     }
  259. }

Última edición por ImNoob007; 03/04/2010 a las 18:29 Razón: Vincular imagen