[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons and callback functions.

Features:

Easy configuration
Lightweight (2 KB gzipped)
It works in all major browsers including IE11 +

Compatibility

IE11+, Edge, Chrome, Firefox, Opera, Safari

Must Read: Framework for Progress Forms Steps | jQuery-Form-Slider

jQuery Step Wizard Plugin Details

Post Name	jQuery Step Wizard Plugin
Author Name	oguzhanoya
Category	Form Plugins, Progress Bar
Official Page	Click Here
Official Website	github.com
Publish Date	September 21, 2020
Last Update	September 17, 2023
Download	Link Below
License	MIT

How to make use of it:

Installation:

npm install jquery.steps

1. Include plugin style sheets.

<link rel="stylesheet" href="css/jquery-steps.css">

2. Do the necessary coding for the processor. That’s it, you don’t need to do anything else.

<div class="step-app" id="demo">
  <ul class="step-steps">
    <li data-step-target="step1">Step 1</li>
    <li data-step-target="step2">Step 2</li>
    <li data-step-target="step3">Step 3</li>
  </ul>
  <div class="step-content">
    <div class="step-tab-panel" data-step="step1">
      ...
    </div>
    <div class="step-tab-panel" data-step="step2">
      ...
    </div>
    <div class="step-tab-panel" data-step="step3">
      ...
    </div>
  </div>
  <div class="step-footer">
    <button data-step-action="prev" class="step-btn">Previous</button>
    <button data-step-action="next" class="step-btn">Next</button>
    <button data-step-action="finish" class="step-btn">Finish</button>
  </div>
</div>

3. Include plugins and dependencies. jQuery is the only dependency, be sure to include it.

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="js/jquery-steps.js"></script>

4. Initial plugin with selected options.

<script>
  $('#demo').steps({
    onFinish: function () { alert('complete'); }
  });
</script>

Configuration

Must Read: HTML Component To illustrate Steps In A Multi-step Process | SASS Progress Tracker

Setting	Default Value	Description
startAt	`0`	Starts wizard at specified step number.
showBackButton	`true`	Indicates whether the back button will be visible.
showFooterButtons	`true`	Indicates whether the footer buttons will be visible.
stepSelector	`.step-steps`	The selector is used for each step.
contentSelector	`.step-content`	The selector used for the step content.
footerSelector	`.step-footer`	The selector used for the buttons.
activeClass	`active`	The class is used when a step is active.
doneClass	`done`	The class is used when a step is done.
errorClass	`error`	The class is used when an error occurs in a step.
onInit	`function(){}`	Fired when the plugin is initialized.
onChange	`function(currentIndex, newIndex, stepDirection){return true;}`	Fired when the plugin step changed.
onFinish	`function(){}`	Fired when the plugin wizard finished.
onDestroy	`function(){}`	Fired when the plugin destroys.

Methods

Must Read: A Wizard-Style Plugin With a Series of Customizable Steps | MultiStep

Name	Description
destory	Destroy the plugin instance.
next	Goes to the next step.
prev	Goes to the previous step.
finish	Trigger the onFinish event.
getStepIndex	Gets the current step index.(start from 0)
getMaxStepIndex	Gets the max step index.
setStepIndex	Sets the step index.