Componente FuelUX Wizard: come selezionare manualmente il passaggio attivo?

Question

Non vedo alcuna documentazione per questo.

Come si seleziona manualmente quale pannello è attivo nel componente della procedura guidata?

So che è lì da qualche parte perché è possibile fare clic su una delle schede una volta che è stato passato e tornare a una scheda precedente.

Answer 1

Sì, è possibile modificare wizard step:

$('#MyWizard').wizard('selectItem', { step: step }); 

UPDATE:

Dopo gli ultimi aggiornamenti ora funziona con selectedItem

$('#MyWizard').wizard('selectedItem', { step: step }); 

nota il cambiamento da selezionare per selezionato *.

Answer 2

Non penso che sia possibile impostare direttamente il pannello attivo poiché i passaggi successivi sono disabilitati fino a quando non viene attivato utilizzando prev/next.

Una volta che un passo è stato "attivato" si potrebbe usare jQuery per innescare una scheda click ..

$('[data-target=#step2]').trigger("click"); 

Ecco un esempio di lavoro: http://www.bootply.com/60319 - Se si passa a l'ultimo passo (5), v'è un link che torna al punto 2.

Answer 3

$ ('# MyWizard'). Wizard ('selectedItem', {step: currentStep});

Answer 4

È possibile impostare la classe "attiva" sul Li tag e quando rende la procedura guidata, l'acvite li è segnato.

Questo è un esempio in symfony:

<li data-target="#step1" class="complete"> 
    <span class="step">1</span> 
</li> 
<li data-target="#step2" class="active"> 
    <span class="step">2</span> 
</li> 

Answer 5

So che questa domanda è vecchio, ma ho voluto condividere ciò che ha funzionato per me in combustibile FX 2.x:

$('#MyWizard').wizard('selectedItem', { step: YourStepNumber }); 

esempio:

$('#wizard1').wizard('selectedItem', { step: 7 }); 

Answer 6

$(document).ready(function() { 
    $('#wizard').wizard(); 
    $('#wizard').find('ul.steps li').toggleClass('complete', true); 

    $('#wizard').on('changed.fu.wizard', function (evt, data) { 
     $('#wizard').find('ul.steps li').toggleClass('complete', true); 
    }); 
}); 

Questo rende tutti i passi cl ickable.

Answer 7

$('#btnNext').on('click', function() 
{ 
$('#orderWizard').wizard('next'); 
} 

Sopra codice è per manualmente ottenere il prossimo riquadro per quello precedente si può provare belowed Uno

$('#btnPrev').on('click', function() 
{ 
$('#orderWizard').wizard('previous'); 
}