Simple Use Case: YAHOO.plugin.WizardManager
Markup (wizard container element):
Inicial Message Here (optional link to display the wizard as a static page if the browser don't support javascript)
Script:
var myWizard = new YAHOO.plugin.WizardManager.add("mywizard", {uri:'/PATH/TO/WIZARD/start.php'});
The Manager will reset the wizard container, and fetch for the first page.
Singleton: YAHOO.plugin.WizardManager
YAHOO.plugin.WizardManager.add(str|HTMLElement|obj el, obj config);
Arguments:
(1) el: HTML ID or HTMLElement of existing markup to use as the wizard container.
(2) Configuration Object: JS object defining configuration properties for the Wizard instance. See Configuration section for full list.
Solutions:
Listen for a Wizard Event and make use of the Event's fields:
var myWizard = new YAHOO.plugin.WizardManager.add( "mywizard", {
uri:'/PATH/TO/WIZARD/start.php',
onSubmit: function ( w ) {
alert ( 'Form Submition: ' + w.id );
},
onReady: function ( w ) {
alert ( 'The new page is ready: ' + w.id );
},
onFinish: function ( w ) {
alert ( 'The wizard finish successful: ' + w.id );
// w.values -> literal object with the form values;
}
});
Jump to new page:
You can analice the current status inside the events, and jump to another page if it needed.
YAHOO.plugin.WizardManager.jump("mywizard", '/PATH/TO/WIZARD/newpage.php');
Key Interesting Moments in Wizard
| Events | Fires | Arguments |
|---|---|---|
| onReady | ...when every step is displayed | [0] {element: wizard DOM ref, values: literal with all form values} |
| onSubmit | ...when every step is submitted (ideal for validation) | [0] {element: wizard DOM ref, values: literal with all form values} |
| onError | ...on connection error | [0] {element: wizard DOM ref, values: literal with all form values} |
| onCancel | ...click on cancel button | [0] {element: wizard DOM ref, values: literal with all form values} |
| onFinish | ...when the final step end (include all values as param) | [0] {element: wizard DOM ref, values: literal with all form values} |
Key Wizard Configuration Options
| Option (type) | Default | Description |
|---|---|---|
| id (s) | null | The ID of the wizard container. |
| uri (s) | empty | URL of the wizard first page. |
| onReady (f) | null | Function for the corresponding moment |
| onSubmit (f) | null | Function for the corresponding moment |
| onError (f) | null | Function for the corresponding moment |
| onCancel (f) | null | Function for the corresponding moment |
| onFinish (f) | null | Function for the corresponding moment |
This options can be set in the ADD second argument (eg, {id: 'mywizard', onReady: function( area ) {}})
Node
If YUI Button widget is available, the buttons inside the area will be automatically converted into yui buttons.
See the API Docs at full screen in a new window:
http://www.bubbling-library.com/sandbox/api/index.hml