jQuery Plugin To Create Fast Wizard For Your Webpage - Simple Step

Simple Step is a jQuery plugin for creating a fast and easy wizard to display your step by step progress.

How to use it:

1. The markup structure to create a wizard.

<div id="wizard-demo" class="step-wrapper">

  <ul class="step-header cf">
    <li class="step-header-item active" data-body="#step1">First</li>
    <li class="step-header-item" data-body="#step2">Second</li>
    <li class="step-header-item" data-body="#step3">Third</li>
  </ul>
  
  <div class="step-body">
    <div id="step1" class="step-body-item active">
      <p>This is the first.</p>
    </div>
    <div id="step2" class="step-body-item">
      <p>This is the second.</p>
    </div>
    <div id="step3" class="step-body-item">
      <p>This is the third.</p>
    </div>
  </div>
  
  <div class="step-footer">
    <a href="javascript:void(0)" class="step-btn step-cancel">Cancel</a> 
    <a href="javascript:void(0)" class="step-btn step-prev">Previous</a> 
    <a href="javascript:void(0)" class="step-btn step-next">Next</a>
    <a href="javascript:void(0)" class="step-btn step-finish">Finish</a>
  </div>
  
</div>

2. Include jQuery library and the jQuery simple step plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="step.js"></script>

3. The basic CSS to style the wizard interface.

.cf:after {
  content: ' ';
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}

.cf { zoom: 1; }

.step-wrapper {
  width: 400px;
  border: 1px solid #ccc;
  margin: 150px auto;
}

.step-wrapper .step-header {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f4f4f4;
  border-bottom: 1px solid #ccc;
}

.step-wrapper .step-header-item {
  float: left;
  padding: 10px 20px;
  font-size: 24px;
  text-align: center;
  color: #666;
}

.step-wrapper .step-header .activated { color: #000; }

.step-wrapper .step-header .active { color: #0af; }

.step-wrapper .step-body .step-body-item {
  display: none;
  height: 120px;
  padding: 20px;
}

.step-wrapper .step-body .active { display: block; }

.step-wrapper .step-footer {
  padding: 20px 15px 20px 0;
  text-align: right;
  background-color: #f4f4f4;
  border-top: 1px solid #ccc;
  cursor: default;
}

.step-wrapper .step-footer .step-btn {
  display: inline-block;
  margin-right: 5px;
  height: 30px;
  padding: 0 15px;
  font-size: 16px;
  line-height: 30px;
  text-decoration: none;
  background-color: #fafafa;
  color: #555;
  border: 1px solid #ddd;
}

.step-wrapper .step-footer .step-btn:hover {
  color: #000;
  border-color: #d0d0d0;
  box-shadow: 0 1px 2px -1px #ccc;
}

4. Call the plugin to initialize the wizard.

$('#wizard-demo').step();

5. Default plugin options & callbacks.

$('#wizard-demo').step({

// The container element or selector.
el: '', 

// The switch effect, 'none' and 'slide' are supported.
effect: 'none',     

// The effect duration.
duration: 350,

// The index (zero-based) of the initial step.
startAt: 0,  

// Whether to show the "Cancel" button.
showCancel: true,  

// Whether to show the "Previous" button, which is hidden on the first step.
showPrev: true,  

// Whether to show the "Next" button, which is hidden on the last step.
showNext: true,

// Whether to show the "Finish" button on every step.
showFinish: false,  

// The current step.
activeCls : 'active',   

// The steps in front of the current step.
activatedCls: 'activated',

// Called after switching to the previous step.
onprev: $.noop,

// Called after switching to the next step.
onnext: $.noop,

// Called when trigger the "Cancel" button.
oncancel: $.noop,

// Called when trigger the "Finsh" button.
onfinish: $.noop,

// Called before switching to the previous step.
onbeforeprev: $.noop, 

// Called before switching to the next step.
onbeforenext: $.noop

});

Change log:

2017-02-22

• Fix the this argument

---

This awesome jQuery plugin is developed by Alex1990. For more Advanced Usages, please check the demo page or visit the official website.