A SimpleWizard offers kit developers an alternative method for defining a wizard.
Use the SimpleWizard.css to get a consistent Visual Composer look-and-feel in your wizard. Make sure to use the names WIZARD-AREA, WIZARD-PAGE and BANNER-AREA.
The pages of the SimpleWizard should be organized inside the htc of the SimpleWizard, as in the following example:
Place First Page Content Here
....
Place Last Page Content Here
Define your wizard's trails with the following format:
var trailDataObject = [{id:'SimpleWizardPage1', name:'First Page Name'}, {id:'SimpleWizardPage2', name:'Second Page Name'},
{id:'SimpleWizardPage3', name:'Third Page Name'}];
Start (or change) the wizard's trail by using the start method:
SimpleWizardExample.start(trailDataObject, 'Arbitrary trail name', 0);
Use the attachControl method to link your UI to the SimpleWizard:
SimpleWizardExample.attachControl('trail', YourBannerArea);
SimpleWizardExample.attachControl('next', YourNextButton);
SimpleWizardExample.attachControl('back', YourBackButton);
SimpleWizardExample.attachControl('finish', YourFinishButton);
As the end user progresses through the SimpleWizard, the following functions will be called:
YourPageName_init: When the SimpleWizard loads
YourPageName_enter: When entering the page from the preceeding page (using next)
YourPageName_enterBack: When entering the page from the following page (using back)
YourPageName_exit: When leaving the page to the following page (using next)
YourPageName_exitBack: When leaving the page to the proceeding page (using back)