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

Obtén una cuenta de @zoneartcss.com gratuita

Ver correo

Dic 22

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