Stepy wizard
Wizards stepy.min.js
Overview

jQuery Stepy is a plugin based on FormToWizard that generates a customizable wizard. Supports multiple configuration options such as transitions, clickable titles, controlled text labels, multiple callbacks etc. To change the settings globally, change any option mentioning the scope $.fn.stepy.defaults. + option_name. It must be called before you bind the plugin.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/wizards/stepy.min.js"></script>

Create a form with multiple fieldsets:

<!-- Create form -->
<form class="stepy-basic" action="#">
	<fieldset title="Step 1">
		<legend class="text-semibold">Step 1</legend>
		...
	</fieldset>

	<fieldset title="Step 2">
		<legend class="text-semibold">Step 2</legend>
		...
	</fieldset>
</form>

Finally call the plugin via JavaScript:

// Basic initialization
$(".stepy-basic").stepy({
	// options
});
Plugin options
Name Default Description
back undefined Callback before the backward action
backLabel '< Back' Change the back button label
block false Block the next step if the current is invalid
description false Choose if the descriptions of the titles will be showed
duration 0 Duration of the transition between steps in ms
enter true Enables the enter key to change to the next step
errorImage false If an error occurs, a image is showed in the title of the corresponding step
finish undefined Callback before the finish action
finishButton true Include the button with class called '.finish' into the last step
ignore '' Choose the fields to be ignored on validation
legend false Choose if the legends of the steps will be showed
next undefined Callback before the forward action
nextLabel 'Next &rt;' Change the next button label
select undefined Callback executed when the step is shown
titleClick true Active the back and next action in the titles
titleTarget undefined Choose the place where titles will be placed
transition 'hide' Use transition between steps ('hide', 'fade' or 'slide')
validate false Active the jQuery Validation for each step
Plugin methods
Method Description
.stepy('step', 2); Changes the form to the second step
.stepy('destroy'); Destroy the Stepy's bind and gives you the raw element
Plugin info
Property Description
File name stepy.min.js
Location assets/js/plugins/forms/wizards/
Updates 0
Links

Official plugin website

Github project page
Steps wizard
Wizards steps.min.js
Overview

jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/wizards/steps.min.js"></script>

Create a form with multiple fieldsets:

<!-- Create form -->
<form class="steps-basic" action="#">
	<h6>Step 1 header</h6>
	<fieldset>
		<legend class="text-semibold">Step 1</legend>
		...
	</fieldset>

	<fieldset>
		<legend class="text-semibold">Step 2</legend>
		...
	</fieldset>
</form>

Finally call the plugin via JavaScript:

// Basic initialization
$(".steps-basic").steps({
    headerTag: "h6",
    bodyTag: "fieldset",
    transitionEffect: "fade",
    titleTemplate: '<span class="number">#index#</span> #title#',
    labels: {
        finish: 'Submit'
    },
    onFinished: function (event, currentIndex) {
        alert("Form submitted.");
    }
});
Plugin options
Option Default Description
Appearance
headerTag h1 The header tag is used to find the step button text within the declared wizard area.
bodyTag div The body tag is used to find the step content within the declared wizard area.
contentContainerTag div The content container tag which will be used to wrap all step contents.
actionContainerTag div The action container tag which will be used to wrap the pagination navigation.
stepsContainerTag div The steps container tag which will be used to wrap the steps navigation.
cssClass wizard The css class which will be added to the outer component wrapper.
stepsOrientation horizontal or 0 Determines whether the steps are vertically or horizontally oriented.
Behaviour
titleTemplate <span class="number">#index#.</span> #title# The title template which will be used to create a step button
loadingTemplate <span class="spinner"></span> #text# The loading template which will be used to create the loading animation
Templates
autoFocus false Sets the focus to the first wizard instance in order to enable the key navigation from the begining if true
enableAllSteps false Enables all steps from the begining if true (all steps are clickable).
enableKeyNavigation true Enables keyboard navigation if true (arrow left and arrow right)
enablePagination true Enables pagination (next, previous and finish button) if true
suppressPaginationOnFocus true Suppresses pagination if a form field is focused
enableContentCache true Enables cache for async loaded or iframe embedded content
enableCancelButton false Shows the cancel button if enabled
enableFinishButton true Shows the finish button if enabled
showFinishButtonAlways false Shows the finish button always (on each step; right beside the next button) if true. Otherwise the next button will be replaced by the finish button if the last step becomes active
forceMoveForward false Prevents jumping to a previous step
saveState false Saves the current state (step position) to a cookie. By coming next time the last active step becomes activated
startIndex 0 The position to start on (zero-based)
Transition Effects
transitionEffect none or 0 The animation effect which will be used for step transitions
transitionEffectSpeed 200 Animation speed for step transitions (in milliseconds)
Labels
cancel 'Cancel' Label for the cancel button
current 'Current step:' This label is important for accessability reasons. Indicates which step is activated
pagination 'Pagination' This label is important for accessability reasons and describes the kind of navigation
finish 'Finish' Label for the finish button
next 'Next' Label for the next button
previous 'Previous' Label for the previous button
loading 'Loading ...' Label for the loading animation
Plugin events
Event Default Description
onStepChanging function (event, currentIndex, newIndex) { return true; } Fires before the step changes and can be used to prevent step changing by returning false. Very useful for form validation
onStepChanged function (event, currentIndex, priorIndex) { } Fires after the step has change
onCanceled function (event) { } Fires after cancelation
onFinishing function (event, currentIndex) { return true; } Fires before finishing and can be used to prevent completion by returning false. Very useful for form validation
onFinished function (event, currentIndex) { } Fires after completion
onInit function (event, currentIndex) { } Fires when the wizard is initialized
onContentLoaded function (event, currentIndex) { } Fires after async content is loaded
Plugin info
Property Description
File name steps.min.js
Location assets/js/plugins/forms/wizards/
Updates 0
Links

Official plugin website

Full documentation

Github project page
Form wizard
Wizards /wizards/form/
Overview

jQuery plugin based on top of jQuery UI which turns a form into a multistep wizard. Integrates with the jQuery form plugin for AJAX submission of the form, the validation plugin for client side validation and the BBQ plugin for enabling the browsers back and forward buttons.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/wizards/form/form_wizard.min.js"></script>

<!-- Load extension -->
<script type="text/javascript" src="assets/js/plugins/forms/wizards/form/form.min.js"></script>

Create a form with multiple fieldsets:

<!-- Create form -->
<form class="form-wizard" action="#">
	<fieldset class="step" id="step1">
		<h6 class="form-wizard-title text-semibold">
			<span class="form-wizard-count">1</span>
			Step 1 title
			<small class="display-block">Subtitle</small>
		</h6>
		...
	</fieldset>

	<fieldset>
		<h6 class="form-wizard-title text-semibold">
			<span class="form-wizard-count">2</span>
			Step 2 title
			<small class="display-block">Subtitle</small>
		</h6>
		...
	</fieldset>
</form>

Finally call the plugin via JavaScript:

// Basic initialization
$(".form-wizard").formwizard({
    disableUIStyles: true,
    disableInputFields: false,
    inDuration: 150,
    outDuration: 150
});
Plugin options
Option Default Description
historyEnabled false true enables the BBQ plugin. Enables navigation of the wizard using the browser's back and forward buttons
validationEnabled false true enables the validation plugin
validationOptions undefined Holds options for the validation plugin. Requires validationEnabled
formPluginEnabled false true enables the form plugin. Makes sure that the plugin is posted via AJAX. Set to false if you want to post the form without using AJAX
formOptions { reset: true, success: function(data) { alert("success"); } Holds options for the form plugin. See form plugin documentation for specific options
linkClass ".link" Selector which specifies the CSS-class of inputs used as links in the wizard
submitStepClass "submit_step" Specifies the CSS-class of the steps where the form should be submitted
back ":reset" Specifies the elements used as back buttons
next ":submit" Specifies the elements used as next buttons
textSubmit "Submit" The text of the next button on submit steps
textNext "Next" The text of the next button on non-submit steps
textback "Back" The text of the back button
remoteAjax undefined Object holding options for AJAX calls done between steps
inAnimation {opacity: 'show'} Specifies the animation done during the in-transition between steps
outAnimation {opacity: 'hide'} Specifies the animation done during the out-transition between steps
inDuration 400 Specifies the duration of the in-animation between steps
outDuration 400 Specifies the duration of the out-animation between steps
easing "swing" Specifies the easing used during the transition animations between steps
focusFirstInput false Specifies whether the first input field on each step should be focused
disableInputFields false Specifies whether the input fields in the form should be disabled during the initialization of the plugin. The disabling of inputs may be needed to be done in HTML if the number of input fields are very large, if this is needed - set this flag to false
disableUIStyles false Specifies whether the wizard should use jquery UI styles or not
Plugin events

Example usage:

// Event example
$(function() {

	// bind a callback to the before_step_shown event
	$("#demoForm").bind("before_step_shown", function(event, data) {
		alert(data.isBackNavigation);
	});
});

Available events:

Event Returns Description
after_remote_ajax currentStep: String (id of the current step) This event is triggered after a remote ajax call has been done
before_remote_ajax currentStep: String (id of the current step) This event is triggered before a remote ajax call is done
before_step_shown

The data returned in the data variable is as follows (see the state method for further explanation of the properties):

  • isBackNavigation: boolean - true if the wizard navigated back and false otherwise
  • settings: Object - the current settings of the wizard (see Options)
  • activatedSteps: Array - contains the activated steps of the wizard
  • isLastStep: boolean - true if the current step is a submit step
  • isFirstStep: boolean - true if the first step is the current step
  • previousStep: String - the id of the previous step
  • currentStep: String - the id of the current step
  • backButton: Selector - contains the backButton
  • nextButton: Selector - contains the nextButton
  • steps: Selector - contains the steps of the wizard
  • firstStep: String - the id of the first step
This event is triggered just before a step is shown. It is triggered for both backwards and forwards navigation
step_shown

The data returned in the data variable is as follows (see the state method for further explanation of the properties):

  • isBackNavigation: boolean - true if the wizard navigated back and false otherwise
  • settings: Object - the current settings of the wizard (see Options)
  • activatedSteps: Array - contains the activated steps of the wizard
  • isLastStep: boolean - true if the current step is a submit step
  • isFirstStep: boolean - true if the first step is the current step
  • previousStep: String - the id of the previous step
  • currentStep: String - the id of the current step
  • backButton: Selector - contains the backButton
  • nextButton: Selector - contains the nextButton
  • steps: Selector - contains the steps of the wizard
  • firstStep: String - the id of the first step
This event is triggered when a step is shown. It's triggered for both back and forward navigation
Plugin methods

Example usage:

// Method example
$("#demoForm").formwizard("update_steps");

Available methods:

Method Description
before_step_shown This method returns the state of the wizard
show This method takes care of showing a specified step in the wizard
reset This method takes care of resetting the wizard
destroy This method takes care of removing the wizard functionality from the form
back This method triggers the wizard to move back
next This method triggers the wizard to move to the next step
update_steps This method triggers the wizard to check the form for available steps, and cache them
Plugin info
Property Description
File name form_wizard.min.js, form.min.js
Location assets/js/plugins/forms/wizards/form/
Updates 0
Links Github project page