Show All

Hide All

The HTML markup for a basic wijwizard widget with pages only looks like this.

Drop down to view pages-only markup

<h2>Wizard with Pages Only</h2>
<div id="wizard1" class="mywizard">
    <div>
        Content for the first page.
    </div>
    <div>
        Content for the second page.
    </div>
</div>

You can initialize the widget with the following jQuery script.

Drop down to view script

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $(".mywizard").wijwizard();
    });        
</script>

The markup and script featured here results in the following live widget. Click the arrow buttons to change pages.

The HTML markup for a wijwizard widget with pages and titles looks like this.

Drop down to view markup for pages and titles

<h2>Wizard with Pages and Titles</h2>
<div id="wizard2" class="mywizard">
    <ul>
        <li>
            <h1>Step 1</h1>
            Description of step 1.
        </li>
        <li>
            <h1>Step 2</h1>
            Description of step 2.
        </li>
    </ul>
    <div>
        Content for step 1.
    </div>
    <div>
        Content for step 2.
    </div>
</div>

You can initialize the widget using the same jQuery script.

The markup and script featured here results in the following live widget. Click the back and next buttons to change pages.

See Also

Reference