https://github.com/ndp/wizardize

jQuery plugin to break a form up into pages based on the "fieldsets"
https://github.com/ndp/wizardize

Last synced: about 1 year ago
JSON representation

jQuery plugin to break a form up into pages based on the "fieldsets"

• Host: GitHub
• URL: https://github.com/ndp/wizardize
• Owner: ndp
• Created: 2009-12-09T17:39:23.000Z (over 16 years ago)
• Default Branch: master
• Last Pushed: 2010-04-08T07:35:20.000Z (about 16 years ago)
• Last Synced: 2025-04-25T12:03:19.565Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 2.24 MB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.textile

Awesome Lists containing this project

README

          
h3. Welcome to Wizardize

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.

h3. Getting Started

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();*

   

   

h3. Options

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

h3. Development

Run tests using:

    *rake spec:javascript*