Home

jQuery Web Wizard

This is a plug-in for the jQuery Javascript library which provides a single .webwizard function. It creates a configurable ‘Web Wizard’ screen with simple ‘back’ ‘next’ ‘cancel’ functionality. There is a simple demonstration page here

It can be used to quickly generate multi-screen web wizard applications in Javascript using jQuery.

Simple usage

myform = 'Enter your PIN number: <input type="password">';

$(selector).webwizard(myform);

Full usage

myForm = 'Enter your name: <input type="text" name="myname" value=""/><br/>' +
'Enter your age: <input type="text" name="myage" value=""/><br/>' +
'Enter your quest: <input id="myquest" type="text" name="myquest" value="I seek"/><br/>';

myOptions = {'title':    'News Wizard', // default is 'Web Wizard',
             'next':     'myscript.cgi', // default is current url
             'cancel':   'cancelled.html', // default is /
             form_method: 'GET', // default is POST
             form_action:  '#',   // default is the current url
             form_enctype:  'multipart/form-data', // default is 'normal' url-encoded
             form_onsubmit:  'return myFormValidate(this)', // default is return true
             gif_back:  '/myImages/wizard-back.gif', // default is on googlecode.com
             gif_next:  'myNext.gif', // as above
             gif_cancel:  'myCancel.gif', // as above 
             back_onclick: "return confirm('Are you sure?')", // default is return true
             cancel_onclick: "return confirm('Are you sure?')", // default is return true
             title_bgcolor: '#ffffff', // default is #00007E
             title_fontcolor: '#DDDDDD', // default is #FFFFFF
             hide_buttons: true // default is false
             //
             };

$(selector).webwizard(myForm, myOptions);

Back, Next, and Cancel buttons

The three images used for the back, next and cancel buttons are hosted on Google Code.

You may optionally want to download the three button image files and serve them from your local web server. If you do that you can configure the webwizard to use those image sources instead of pulling them from this server, using the `gif_back` `gif_next` and `git_cancel` options to `webwizard()`. The images to download can be found on Google Code:

http://jquery-webwizard.googlecode.com/hg/wizard-back.gif
http://jquery-webwizard.googlecode.com/hg/wizard-next.gif
http://jquery-webwizard.googlecode.com/hg/wizard-cancel.gif