Cambiar value de wizard jquery boostrap

Question

Saludos,

Se que esto no es un foro de jquery pero si alguien me puede ayudar seria un éxito, lo que intento hacer básicamente es lo siguiente tengo este wizar de boostrap:

Código

<div class="row bs-wizard" style="border-bottom:0;">

    <div class="col-xs-3 bs-wizard-step complete">
        <div class="text-center bs-wizard-stepnum">Informacion</div>
        <div class="progress"><div class="progress-bar"></div></div>
        <a href="#" class="bs-wizard-dot"></a>
        <div class="bs-wizard-info text-center"></div>
    </div>

    <div class="col-xs-3 bs-wizard-step disabled">
        <!-- complete -->
        <div class="text-center bs-wizard-stepnum">prueba</div>
        <div class="progress"><div class="progress-bar"></div></div>
        <a href="#" class="bs-wizard-dot"></a>
        <div class="bs-wizard-info text-center"></div>
    </div>

    <div class="col-xs-3 bs-wizard-step disabled">
        <!-- complete -->
        <div class="text-center bs-wizard-stepnum">Step 3</div>
        <div class="progress"><div class="progress-bar"></div></div>
        <a href="#" class="bs-wizard-dot"></a>
        <div class="bs-wizard-info text-center"></div>
    </div>

    <div class="col-xs-3 bs-wizard-step disabled">
        <!-- active -->
        <div class="text-center bs-wizard-stepnum">Step 4</div>
        <div class="progress"><div class="progress-bar"></div></div>
        <a href="#" class="bs-wizard-dot"></a>
        <div class="bs-wizard-info text-center"></div>
    </div>
</div>

<ul class="pager wizard">
    <li class="previous first" style="display:none;"><a href="#">First</a></li>
    <li class="previous"><a href="#">Atras</a></li>
    <li class="next last" style="display:none;"><a href="#">Last</a></li>
    <li class="next"><a href="#">Siguiente</a></li>
</ul>

: 

Lo que quiero hacer con jquery o con cualquier otra tecnología de frondend es que cuando se le da click de al botón "Siguiente" pase el progres bar al segundo step 2, y así sucesivamente, al igual cuando se le de al boton "Atras" retreocesa el mismo progres bar atras. como puedo hacer esto ?

---

Si mi respuesta te ha ayudado a resolver tus problemas, Selecciona "Proponer como respuesta"

Blog
J.Joaquin

Answer 1

Hola J. Joaquin,

Pero ya existe esa funcionalidad con el wizard.

Wizard With Progress Bar using events

Como puedes observar en link, se asemeja a lo que deseas o no?

Link completo :

Twitter Bootstrap Wizard Plugin

Sólo sería cambiar el estilo, para que te muestre tal y como lo tienes.

O necesariamente deseas hacerlo con JQuery puro?

Saludos.

---

JC NaupaCrispín
Lima - Perú

La magia no existe, la programación SI

Answer 2

Saludos Joel,

Gracias por responder, habia visto ese lo único que me está dando dificultad copio el código y las librerías de boostrap y jquery pero no me funciona el progress bar alguna sugerencia?

Twitter Bootstrap Wizard Plugin

---

Si mi respuesta te ha ayudado a resolver tus problemas, Selecciona "Proponer como respuesta"

Blog
J.Joaquin

Answer 3

Hola J. Joaquin,

Disculpa por la demora.

Haz descargado el zip ? twitter-bootstrap-wizard

En total tienes que tener 3 .js para poder usarlas.

<script src="js/jquery-3.1.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.bootstrap.wizard.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
       $('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
             var $total = navigation.find('li').length;
	     var $current = index+1;
	     var $percent = ($current/$total) * 100;
	     $('#rootwizard .progress-bar').css({width:$percent+'%'});
	      }});
	});
</script>

El ejemplo que he usado para ver la compilación es :

Wizard With Progress Bar using events

Saludos.

---

JC NaupaCrispín
Lima - Perú

La magia no existe, la programación SI