[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

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

jquery wizard example, jquery smart wizard example, jquery wizard plugin, jquery steps, multi step form wizard jquery validation

Features:

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

How to make use of it:

Install & download:

# NPM
$ npm install jquery.steps --save

1. Load the newest version of jQuery and the jQuery steps plugin’s information in your HTML doc.

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

2. The primary HTML structure to create your individual steps is complying with:

<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">
        Welcome to jQuery Steps - Web Code Flow
        jQuery steps wizard is a simple and lightweight plugin. Steps is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons and callback functions.
      </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 plugin on the top container and also you’re completed.

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

4. Possible choices to customize the step wizard.

$('#demo').steps({
  startAt: 0,
  showBackButton: true,
  showFooterButtons: true,
});

5. Callback functions accessible.

$('#demo').steps({
  onInit: $.noop,
  onDestroy: $.noop,
  onFinish: $.noop,
  onChange: function onChange() {
    return true;
  }
});

6. Default CSS classes & selectors.

$('#demo').steps({
  stepSelector: '.step-steps > li',
  contentSelector: '.step-content > .step-tab-panel',
  footerSelector: '.step-footer',
  buttonSelector: 'button',
  activeClass: 'active',
  doneClass: 'done',
  errorClass: 'error'
});

7. API strategies.

var mySteps = $('#demo').steps();
steps_api = steps.data('plugin_Steps');

// go to the next step
steps_api.next();

// back to the prev step
steps_api.prev();

// finish the wizard
steps_api.finish();

// get the current step index
steps_api.getStepIndex();

// destroy the plugin
steps_api.destory();

Simple Customizable Step Plugin, jquery-steps show finish button, jQuery step wizard plugin/Github


See Demo And Download

Official Website(oguzhanoya): Click Here

This superior jQuery/javascript plugin is developed by oguzhanoya. For extra Advanced Usage, please go to the official website.

Share