wijwizard

The wijwizard is a UI that is used to display content on separate, navigable pages so you save screen real estate or to simplify input tasks by creating a series of forms. For easy navigation, you can use wijwizard's built-it navigation buttons or autoplay feature. You can also combine it with the wijpager widget for paged navigation.

Open the .cshtml file for the View in which you want to display a wizard. Add the following markup to create a wizard with three pages and three headers.

<div id="pages">
    <ul>
        <li><h1>Step 1</h1></li>
        <li><h1>Step 2</h1></li>
        <li><h1>Step 3</h1></li>
    </ul>
     <div><p>Step 1</p></div>
     <div><p>Step 2</p></div>
     <div><p>Step 3</p></div>
</div>

To make the wizard work, you need to initialize the widget. Add the following script to the .cshtml file.

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

The markup and script above results in a wizard widget that contains three steps.

For more information about wijwizard, click one of the externall links to view our Wijmo wiki documentation: