Site Overlay

Crear steps con JQuery

Veamos como crear dos tipos de steps

JQUERY AJAX 

en el primer ejemplo vemos 4 botones de cargas

$.get(«url», {variables}, function(htmlexterno){
$(«#cargadatos»).html(htmlexterno);
});

Entonces llamamos con cada botón a cargar contenido en un mismo div, tenemos que tener cargadas todas las bibliotecas necesarias, al cargar el contenido de una página externa tenemos el beneficio de poder usar los css declarado en la misma página principal 

<script>
function carga1(){
$(«#cargadatos»).html(«htmlexterno»);

$.get(«paso1.html», {}, function(htmlexterno){
$(«#cargadatos»).html(htmlexterno);
});

}
function carga2(){
$(«#cargadatos»).html(«htmlexterno»);

$.get(«paso2.html», {}, function(htmlexterno){
$(«#cargadatos»).html(htmlexterno);
});

}
function carga3(){
$(«#cargadatos»).html(«htmlexterno»);

$.get(«paso3.html», {}, function(htmlexterno){
$(«#cargadatos»).html(htmlexterno);
});

}

function carga4(){
$(«#cargadatos»).html(«htmlexterno»);

var1= «hola»;
var2= «mundo»;
$.get(«paso4.php», {var1,var2}, function(htmlexterno){
$(«#cargadatos»).html(htmlexterno);
}); }
<button onClick=»carga1();» class=»btn btn-success»>carga 1</button>
<button onClick=»carga2();» class=»btn btn-primary»>carga 2</button>
<button onClick=»carga3();» class=»btn btn-dark»>carga 3</button>
<button onClick=»carga4();» class=»btn btn-danger»>carga 4</button>

En el segundo ejemplo podemos ver como hacer step de pasos siguiente y atrás. Acá cargamos en varios div dentro de uno principal

<div class=»div col-md-8″ id=»cargadatos2″ align=»left»>
<div class=»progress-bar» role=»progressbar» style=»width: 0%» aria-valuenow=»0″ aria-valuemin=»0″ aria-valuemax=»100″>0%</div>
<div id=»step1″ class=»col-md-6 alert-warning» >paso1<hr></div>
<div id=»step2″ class=»col-md-6 alert-danger» >paso2<hr></div>
<div id=»step3″ class=»col-md-6 alert-primary» >paso3<hr></div>
<div id=»step4″ class=»col-md-6 alert-success»>paso4 <hr></div>

</div>

<button onClick=»cargaatr();» class=»btn btn-success»>Atras</button>
<button onClick=»cargasig();» class=»btn btn-success»>Siguiente</button>

function cargadiv(){
$(«#contador»).empty();
$(«#contador»).append(opcion);

switch(opcion){

case 1:
peporcentaje = 30;
$(«#step1»).show();
$(«#step2»).hide();
$(«#step3»).hide();
$(«#step4»).hide();
break;
case 2:
peporcentaje = 60;
$(«#step1»).hide();
$(«#step2»).show();
$(«#step3»).hide();
$(«#step4»).hide();
break;
case 3:
peporcentaje = 80;
$(«#step1»).hide();
$(«#step2»).hide();
$(«#step3»).show();
$(«#step4»).hide();
break;
case 4:
peporcentaje = 100;
$(«#step1»).hide();
$(«#step2»).hide();
$(«#step3»).hide();
$(«#step4»).show();
break;4

default:
if (opcion>=4){
opcion=3;
}else if(opcion<=0){ opcion=1; }

break;
}

}


</script>
<script>
$( document ).ready(function() {
$(«#step1»).hide();
$(«#step2»).hide();
$(«#step3»).hide();
$(«#step4»).hide();
});

</script>


Aquí será donde se cargue los datos.

Creamos los botones para siguiente y atrás


podemos iniciar todos los steps con hidden o esconderlos y así mostrar el paso que corresponda

una vez cargada la página se esconden los steps

Cosas adicionales que se pueden hacer, formulario por steps.

Barra de carga.
estilo personalizado.
Inputs dinamicos.

descargar ejemplo 

 

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll Up