This plugin takes a regular form and creates separate panels out of it based
on the fieldsets included in the page.
- hides all but the first page
- adds a list of “status buttons” as the first element in the form. Style as
you see appropriate (or "form ol:first-child { display: none}) - adds “next” and “previous” buttons to each panel
- The regular submit button for the form is moved to the last panel.
That’s about it.
1. Download the code from
http://github.com/ndp/wizardize/raw/master/public/javascripts/jquery/jquery.wizardize.js
2. Include it in your page
3. Create a form with fieldsets separating out the different panels
4. Wizardize!
$(‘form’).wizardize();wizardize accepts an options hash. All values are optional:
- statusButtonsTemplate: how the status buttons are named. Supports simple
variable substitution: ‘$TITLE’ is the title tag of the fieldset, “$#” is
the index of the fieldset. Therefore, to generate status buttons like
“Step 3: provide your credentials”, use “Step$#: $ TITLE” - statusButtonsSpacer: any html to add between the generated status buttons
by default the status buttons are just an ordered list of the names of
the panels - nextButton: name of the next button added to each panel. Defaults to ‘Next’.
- prevButton: name of the previous button added to each panel. ‘Previous’,
- nextCallback: function to be called when the user goes to the next panel
Run tests using:
rake spec:javascript