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
Bien, lo que nos queda, es lo siguiente:
No hay comentarios.:
Publicar un comentario