jQuery Wizard - Extensión para implementar asistentes o wizards

Cuando se tienen que ingresar muchos datos, un forma de hacerlo y facilitarle la tarea a los usuarios, es agruparlos en unidades significativas y a estas llamarlas pasos, esto es lo que comúnmente se denomina wizards o asistentes.

jQuery Wizard es un extensión para la popular biblioteca jQuery que permite implementar en una página web un asistente.

EntradasRelacionados

La tecnología y los datos están manteniendo “fresca” a la industria

El Internet de las Cosas revoluciona al mundo

Implementación

Enlazar la CSS que contiene los estilos:

<link href="style.css" rel="stylesheet" type="text/css" />

Enlazar los archivos JS:

<script type="text/javascript" src="lib/jquery-latest.pack.js"></script>

Inicializar el script:

<script type="text/javascript">
function loadnext(divout,divin){

$("." + divout).hide();
$("." + divin).fadeIn("fast");
}

Luego escribir el código HTML:

<div id="wizardwrapper"> /* Div que contiene a toda la implementación del wizard */
  <div class="1"> /* panel - se repite para cada paso
es decir, si el asistente posee 5 pasos, tendremos:
esta misma definición repetida 5 veces */

    <h3>Step 1</h3>
    <div id="wizardcontent"> </div> /* botone anterior/siguiente */    <div class="buttons">
      <button type="submit" class="previous"  disabled="disabled"> <img src="images/arrow_left.png" alt=""/> Back </button>
      <button type="submit" class="next" onclick="loadnext(1,2);"> Next <img src="images/arrow_right.png" alt="" /> </button>

    </div>
    <ul id="mainNav" class="fiveStep"> /* pasos del asistente/
      <li class="current"><a title=""><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>

      <li class="mainNavNoBg"><a title=""><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></a></li>
    </ul>
    <div style="clear:both"></div>
  </div>