Wizards

Provides a mechanism to display steppable content

About the Plugin

Wizards are handled by the jQuery Smart Wizard 4 library.

Our initializer will create a wizard in its most basic form. Further options should be provided through editing the js/wizard.js file to include your required parameters, such as events and validation.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

  1. Include the library in your page
    • Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.

      <!-- jQuery smartWizard facilitates steppable wizard content -->
      <script type="text/javascript" src="assets/js/jquery.smartWizard.min.js"></script>

      Alternatively you may wish to load this resource from a CDN to potentially improve page load times.

      <!-- jQuery Countdown (displays countdown text to a specified date) -->
      <script type="text/javascript" src="https://unpkg.com/smartwizard@^4.3.1"></script>
  2. Load the initializer code in index.js
    • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.
      import './wizard';

Basic Usage

Wizards are initialized by class wizard on page load.

Below is the basic HTML required to work with a wizard. First child of the .wizard element should be a ul to house the wizard navigation elements. Second child of the .wizard element should be a div with a child div for each wizard step.

And id on each step div allows for linking to the step through both URL or an a on the page.

<div class="wizard">
  <ul>
      <li><a href="#step-1">Step Title<br /><small>Step description</small></a></li>
      <li><a href="#step-2">Step Title<br /><small>Step description</small></a></li>
      <li><a href="#step-3">Step Title<br /><small>Step description</small></a></li>
      <li><a href="#step-4">Step Title<br /><small>Step description</small></a></li>
  </ul>

  <div>
      <div id="step-1" class="">
          Step Content
      </div>
      <div id="step-2" class="">
          Step Content
      </div>
      <div id="step-3" class="">
          Step Content
      </div>
      <div id="step-4" class="">
          Step Content
      </div>
  </div>
</div>

Defaults

By default, our initializer starts each wizard with the following options:

Option Default Description
transitionEffect 'fade' Use fade effect between each step in the wizard
showStepURLhash false Disables step ID appearing in URL bar
toolbarSettings { toolbarPosition: 'none' } Disables toolbar element

Advanced Usage

The jQuery Smart Wizard 4 plugin provides an in-depth array of options that can be set upon initialization, including event handlers which can help to validate form content before making ajax calls etc.

Visit the Smart Wizard documentation for full detail on each option.

To initialize your wizard using options that are not specified by default, open js/mrare/wizard.js and edit the options object. Defaults are shown below.

$('.wizard').smartWizard({
  transitionEffect: 'fade',
  showStepURLhash: false,
  toolbarSettings: { toolbarPosition: 'none' },
});