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.

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>

  </div>
</div>

jQuery Wizar Plugin:

Web: worcesterwideweb.com/2007/06/04/jquery-wizard-plugin

Demo: worcesterwideweb.com/jquery/wizard

Nota: Este demo utiliza la implementación CSS Step Menu: codylindley.com/CSS/325/css-step-menu