type: widget || utility

release: 0.0

status: in planning

documentation: url || N/A

demo: url || N/A

1 - Description:

This plug-in helps to create automatic wizards out of HTML forms. A wizard is a multi-step process, and helps the developer to better group related inputs, and the user to not be overwhelmed with the size of a form, and understand its structure better.

Form input can be validated (using FormValidation, for instance) on each step or after pressing the submit button. Other form-related plugins, such as Mask must be compatible, and also validatable.

Wizard steps can be either static or clickable, allowing the end user to fill out the form in any order. The user can optionally be restricted to only return to steps he has already filled out, but not being able to skip ahead. ProgressIndicator can be incorporated to a step, or the wizard.

Information on a step before submitting can either be left as it is, or saved to a database or file using AJAX, with either a step-specific Save button, a wizard-specfiic Save button, or keyUp, focus or Blur.

Existing jQuery Plugins

• http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx
• http://worcesterwideweb.com/2007/06/04/jquery-wizard-plugin/

Existing jQuery Widgets (use the jQuery UI Widget Factory and CSS Framework)

• https://github.com/dominicbarnes/jWizard/
• https://github.com/kflorence/jquery-wizard/

2 - Visual Design:

Basic non-branching wizard with progress bar.

3 - Functional Specifications/Requirements:



(none yet, plugin is in planning, not yet design phase)

4 - Markup & Style:

     4.1 Initial markup examples

     (Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )

     4.2 Recommended transformed HTML markup

     (The HTML markup structure and classes that will be used by the scripts in the enhanced version) 

     4.3 Accessibility recommendation

    (Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices) 

     4.4 CSS & Theme

    (Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.) 

5 - Latest version of plugin:

(Link to the latest version in the jQuery UI trunk here)

6 - Open issues being discussed

(Use this area to place things that we're hashing out like features and options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)