dic
22
2009

Crear un Wizard para el registro de usuarios en Jquery – Plugin

An article by miguelortega

wizard jquery

Este plugin de jQuery esta excelente para tus formulario muy extensos y es difícil hacerlos compactos. COn este Plugin puedes crear un wizard para en en sencillos pasos tus usuarios puedan llenar los campos en una forma mas interactiva.

Descarga el Plugin de Jquery

Agrega en tu pagina el siguiente código javascript, que sea dentro de head

<script>
function loadnext(divout,divin){$("." + divout).hide();$("." + divin).fadeIn("slow");}
</script>

Luego este código en el Body

<p id="wizardwrapper"> </p>
<p class="1"> </p>
<h3>Step 1</h3>
<p id="wizardcontent"> </p>
<p class="buttons">
      <button type="submit" disabled="true" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
      <button type="submit" onclick="loadnext(1,2);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
<ul id="mainNav" class="fiveStep">
<li class="current"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
        <li><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
        <li><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
        <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
<li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
</ul>
<p id="wizardpanel" class="2"> </p>
<h3>Step 2</h3>
<p id="wizardcontent"> </p>
<p class="buttons">
      <button type="submit" onclick="loadnext(2,1);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
      <button type="submit" onclick="loadnext(2,3);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
<ul id="mainNav" class="fiveStep">
<li class="lastDone"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="current"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
        <li><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
        <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
<li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
</ul>
<p id="wizardpanel" class="3"> </p>
<h3>Step 3</h3>
<p id="wizardcontent"> </p>
<p class="buttons">
      <button type="submit" onclick="loadnext(3,2);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
      <button type="submit" onclick="loadnext(3,4);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
<ul id="mainNav" class="fiveStep">
<li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="lastDone"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="current"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
        <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
<li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
</ul>
<p id="wizardpanel" class="4"> </p>
<h3>Step 4</h3>
<p id="wizardcontent"> </p>
<p class="buttons">
      <button type="submit" onclick="loadnext(4,3);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
      <button type="submit" onclick="loadnext(4,5);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
<ul id="mainNav" class="fiveStep">
<li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="done"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="lastDone"><a href="/"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="current"><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
<li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
</ul>
<p id="wizardpanel" class="5"> </p>
<h3>Step 5</h3>
<p id="wizardcontent"> </p>
<p class="buttons">
      <button type="submit" onclick="loadnext(5,4);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
      <button type="submit" onclick="submit()" class="next"> Finish <img src="/images/arrow_right.png" /> </button>
<ul id="mainNav" class="fiveStep">
<li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="done"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="done"><a href="/"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="lastDone"><a href="/"><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="mainNavNoBg current"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
</ul>

Css

Ver Ejemplo