Add a Page in Script

Building on the Quick Start example, you can add a page to the wizard using the add method, and the stepHeaderTemplate and panelTemplate options.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which sets up templates for the step headers and panels, and adds a new step in the second position.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#pages").wijwizard({ stepHeaderTemplate: '<li><h5>#{title}</h5>#{desc}</li>', panelTemplate: '<div><p>This is the new page content.</p</div>' }); $("#pages").wijwizard("add", 1, "Extra Step", "This is the new step"); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#pages").wijwizard({
            stepHeaderTemplate: '<li><h5>#{title}</h5>#{desc}</li>',
            panelTemplate: '<div><p>This is the new page content.</p</div>'           
        });
        $("#pages").wijwizard("add", 1, "Extra Step", "This is the new step");
    });
</script>

In the <body> section of your HTML file, replace the markup for the basic wizard with this markup, which adds a number of steps with headers and more content.

Markup	Copy Code
<div id="pages"> <ul> <li> <h5>Step 1</h5> This is the first step</li> <li> <h5>Step 2</h5> This is the second step</li> <li> <h5>Step 3</h5> This is the third step</li> </ul> <div> <p> Trotsky da izzle loo twiddle zonkity shnazzlezunk. Duh zap dee Mr. Burns tangledizzle. Oodle ha blapping zingletang. DUH oodle The Honorable Mayor Marion Barry...izzle flupping doofflong.</p> </div> <div> <p> Boo flippity tongle woggle bleep ha funk. Dizzle! Bleep shnazzle SHRUBBERY roo ding blop wobble bam zangle. Bing duh flob meep. </p> </div> <div> <p> Zang zip razzle-shnaz. SHNAZZLE LOO ZOOM DOO DANG SHNOZZLE ROO BLUP? Zap blung tingle? Zongle dabba dobbahizzle, "ongle doo ha zungle," ho blob bleeb jangle hum tangle-twiddle... ongle ha yip!</p> <p>Blippity Fling Flang by <a href="http://bff.orangehairedboy.com/">Orange Haired Boy</a>.</p> </div> </div>

Markup

Copy Code

<div id="pages">
    <ul>
      <li>
        <h5>Step 1</h5>
        This is the first step</li>
      <li>
        <h5>Step 2</h5>
        This is the second step</li>
      <li>
        <h5>Step 3</h5>
        This is the third step</li>                    
    </ul>
      <div>
        <p>
          Trotsky da izzle loo twiddle zonkity shnazzlezunk. Duh zap dee Mr. Burns tangledizzle. 
          Oodle ha blapping zingletang. DUH oodle The Honorable Mayor Marion Barry...izzle flupping 
          doofflong.</p>
      </div>
      <div>
        <p>
          Boo flippity tongle woggle bleep ha funk. Dizzle! Bleep shnazzle SHRUBBERY roo ding blop 
          wobble bam zangle. Bing duh flob meep. </p>
      </div>
      <div>
        <p>
          Zang zip razzle-shnaz. SHNAZZLE LOO ZOOM DOO DANG SHNOZZLE ROO BLUP? Zap blung tingle? 
          Zongle dabba dobbahizzle, "ongle doo ha zungle," ho blob bleeb jangle hum tangle-twiddle...
          ongle ha yip!</p>
        <p>Blippity Fling Flang by <a href="http://bff.orangehairedboy.com/">Orange Haired Boy</a>.</p>
      </div>                
</div>

Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with the WizardAddPage.

Reference

wijwizard API

panelTemplate Option

stepHeaderTemplate Option

add Method