Lightweight Step Wizard Plugin In jQuery – jquery-steps.js

Step Wizard
File Size: 12.12 KB
Views Total: 2766 views
Last Update:June 20, 2022
Publish Date: April 19, 2017
Official Website: Go to website
License: MIT
Plugin Author: oguzhanoya
Demo    Download

The jQuery-steps is a jQuery plugin. it is light weight and customizable plugin. steps form work with step-by-step wizard with navigation buttons and callback functions. It is easy to integrate other plugins e.g. jQuery validation plugin to create a step wizard driven form with field validation.

Table of Contents

How to use :

1. Add HTML Code :

<link rel="stylesheet" href="jquery-steps.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-steps.js"></script>

2. Add basic html structure :

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

3.  Just  call the jquery plugin script :

$('#demo').steps();

Done

List Of Version :
  • v1.1.3
  • v1.1.2
  • v1.1.1
  • v1.1.0
  • v1.0.3
  • v1.0.2
  • v1.0.1

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.