Worcester Web Site Development Blog

+ Almost all quality improvement comes via simplification of design, manufacturing... layout, processes, and procedures.

July 30, 2010, 5:03 pm

Categories

Latest

-
-

Jquery Wizard Plugin

June 4, 2007

After looking for a jquery plugin that will emulate a windows wizard I decided to make my own (with the help of cody lindley’s css step menu). I am using Jquery which can be found here and css step menu found here.

The code:

First we need a simple javascript function will hide and display a div, this method is used with jquery and you can learn how to use this here

Code (javascript)
  1.  
  2. function loadnext(divout,divin){$("." + divout).hide();$("." + divin).fadeIn("slow");}

Next the html code, notice how each step is wrapped in the ID wizardwrapper and each div is assigned a class for the corresponding step number.

Code (html)
  2. <p id="wizardwrapper"> </p>
  3. <p class="1"> </p>
  5. <h3>Step 1</h3>
  6. <p id="wizardcontent"> </p>
  8. <p class="buttons">
  9.       <button type="submit" disabled="true" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  11.       <button type="submit" onclick="loadnext(1,2);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
  12. <ul id="mainNav" class="fiveStep">
  13. <li class="current"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  14.         <li><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  15.         <li><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  16.         <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  17. <li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  18. </ul>
  19. <p id="wizardpanel" class="2"> </p>
  21. <h3>Step 2</h3>
  22. <p id="wizardcontent"> </p>
  24. <p class="buttons">
  25.       <button type="submit" onclick="loadnext(2,1);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  27.       <button type="submit" onclick="loadnext(2,3);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
  28. <ul id="mainNav" class="fiveStep">
  29. <li class="lastDone"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  30. <li class="current"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  31.         <li><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  32.         <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  33. <li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  34. </ul>
  35. <p id="wizardpanel" class="3"> </p>
  37. <h3>Step 3</h3>
  38. <p id="wizardcontent"> </p>
  40. <p class="buttons">
  41.       <button type="submit" onclick="loadnext(3,2);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  43.       <button type="submit" onclick="loadnext(3,4);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
  44. <ul id="mainNav" class="fiveStep">
  45. <li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  46. <li class="lastDone"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  47. <li class="current"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  48.         <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  49. <li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  50. </ul>
  51. <p id="wizardpanel" class="4"> </p>
  53. <h3>Step 4</h3>
  54. <p id="wizardcontent"> </p>
  56. <p class="buttons">
  57.       <button type="submit" onclick="loadnext(4,3);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  59.       <button type="submit" onclick="loadnext(4,5);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
  60. <ul id="mainNav" class="fiveStep">
  61. <li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  62. <li class="done"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  63. <li class="lastDone"><a href="/"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  64. <li class="current"><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  65. <li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  66. </ul>
  67. <p id="wizardpanel" class="5"> </p>
  69. <h3>Step 5</h3>
  70. <p id="wizardcontent"> </p>
  72. <p class="buttons">
  73.       <button type="submit" onclick="loadnext(5,4);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  75.       <button type="submit" onclick="submit()" class="next"> Finish <img src="/images/arrow_right.png" /> </button>
  76. <ul id="mainNav" class="fiveStep">
  77. <li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  78. <li class="done"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  79. <li class="done"><a href="/"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  80. <li class="lastDone"><a href="/"><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  81. <li class="mainNavNoBg current"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  82. </ul>
  83.  

A Demo of the wizard

Posted by Anthony under jquery | Comments (32)

Copyright © 2010 Worcester Web Site Development Blog | RSS Feed | CSS and XHTML
Powered by Wordpress | Design by Worcester Wide Web