Wijmo UI for the Web
Markup and Scripting
Wijmo User Guide > Widgets > Wizard > Markup and Scripting

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

Markup
Copy Code
<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.

Script
Copy Code
<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

Markup
Copy Code
<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