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