viernes, 11 de octubre de 2013

Como hacer un form paginado con JQuery

Hola, hoy les traigo un código para poder paginar un Form o cualquier otra cosa diseñado por mi.

El código es bastante simple, primero creamos un objeto que contenga los metodos necesarios para ocultar, mostrar, y pasar de pagina. Al crear el nuevo objeto se deben ingresar el numero de paginas, la pagina que se va a mostrar al cargar y la referencia al form. Luego asignamos a los botones siguiente y anterior las funciones correspondientes, no necesita mas explicacion.

Codigo JQuery

function Formulario(cantidad, posicion, formRef){
 this.cantidad = cantidad;
 this.posicion = posicion;
 this.formRef = formRef;

 this.ocultarTodos = function(){
  for(var pagina=0; pagina<=this.cantidad; pagina++)
   $(this.formRef+" .parte"+pagina).hide();
  console.log("todos ocultos");
 }

 this.mostrar = function( pagina ){
  this.ocultarTodos();
  $(this.formRef+" .parte"+pagina).show();
  console.log("muestra "+pagina);
 }

 this.siguiente = function(){
  console.log("siguiente");
  if( this.posicion < this.cantidad ){
   this.posicion ++;
   this.mostrar( this.posicion );
  }      
 }

 this.anterior = function(){
  console.log("anterior");
  if( this.posicion > 1 ){
   this.posicion --;
   this.mostrar( this.posicion );
  }      
 }    

 this.constructor = function(){
  this.ocultarTodos();
  this.mostrar(this.posicion);
  $(this.formRef+" .parte1 .ant").attr("disabled", "disabled");
  $(this.formRef+" .parte"+cantidad+" .sig").attr("disabled", "disabled");
 }
};

$(function(){
 
 var miForm = new Formulario(4, 1, "#miform");
 
 miForm.constructor();
 
 $(".sig").click( 
  function(){
   miForm.siguiente()
  }
 );

 $(".ant").click( 
  function(){
   miForm.anterior()
  } 
 );
});


Y el siguiente es el codigo HTML, como podemos ver es un form con 4 div en su interior.

Codigo HTML

<form id="miform">
   <div class="parte1">
      <h2>Datos de la Persona</h2>
      <label>Nombre</label>
      <input type="text" name="nombre" >
      <label>Apellido</label>
      <input type="text" name="apellido" >
      <br>
      <input type="button" class="ant" value="Ant" >
      <input type="button" class="sig" value="Sig" >
   </div>
   <div class="parte2">
      <h2>Direccion</h2>
      <label>Provincia</label>
      <input type="text" name="provincia" >
      <label>Domicilio</label>
      <input type="text" name="domicilio" >
      <br>
      <input type="button" class="ant" value="Ant" >
      <input type="button" class="sig" value="Sig" >
   </div>
   <div class="parte3">
      <h2>Empresa</h2>
      <label>Nombre</label>
      <input type="text" name="nombreEmpresa" >
      <label>Telefono</label>
      <input type="text" name="telefonoEmpresa" >
      <br>
      <input type="button" class="ant" value="Ant" >
      <input type="button" class="sig" value="Sig" >
   </div>
   <div class="parte4">
      <h2>Contacto</h2>
      <label>eMail</label>
      <input type="text" name="email" >
      <label>Telefono</label>
      <input type="text" name="telefono" >
      <br>
      <input type="button" class="ant" value="Ant" >
      <input type="button" class="sig" value="Sig" >
   </div>
</form>


Bien, lo que nos queda, es lo siguiente:

Datos de la Persona


Direccion


Empresa


Contacto



No hay comentarios.:

Publicar un comentario

Sobre el autor