Wijmo UI for the Web
Add Headers
Wijmo User Guide > Widgets > Wizard > Wizard How To > Add Headers
Show All
Hide All

Building on the Quick Start example, you can change the wizard to show headers with titles for each page of the wizard. Doing this also automatically removes the arrow buttons from the pages and replaces them with back and next buttons below the pages.

  1. In the <body> section of your HTML file, replace the markup for the basic wizard with this markup, which adds an ordered list with title text for each page in heading text. (You can also use an unordered list for the same results.)

    Drop down and copy markup to paste in the <body> section

    Markup
    Copy Code 
    <div id="wizard1">
    <ol>    
        <li><h1>Header 1</h1></li>
        <li><h1>Header 2</h1></li>
        <li><h1>Header 3</h1></li>
    </ol>   
    <div>Page 1 content</div>
    <div>Page 2 content</div>
    <div>Page 3 content</div>
</div>
  2. No changes are necessary in the <head> section of your HTML file. The basic script is sufficient to create the wizard.
  3. Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with headers along the top for each page, and back and next buttons below.
See Also
Wizard How To

Widgets

Wizard

KO

KO Wizard Binding

Concepts

Style Options

Reference

wijwizard API

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page