❤
npm
Sign UpSign In

pier5-stepped-process

1.0.0 • Public • Published

Stepped Process jQuery Plugin

Stepped Process is the simplest jQuery plugin for the creation of step by step forms or wizards.

Getting Started

Simply call the steppedProcess method on the element you want to divide into steps:

$(document).ready(function() {
  $(".steps-wrapper").steppedProcess();
});

Your html should include an element which contains all the steps and an element which contains the controls (previous, next and finish buttons):

<body>
  <div class="steps-wrapper">
    <div class="step step-1">
      <p>First step</p>
    </div>
    <div class="step step-2">
      <p>Second step</p>
    </div>
    <div class="step step-3">
      <p>Third step</p>
    </div>
    <div class="step step-4">
      <p>Fourth step</p>
    </div>
  </div>
  <div class="controls">
    <button class="prev">Previous</button>
    <button class="next">Next</button>
    <button class="finish">Finish</button>
  </div>
</body>

By default, all elements with class step will be selected and turned into a single step each. The same applies for the buttons which by default are selected between the descendants of the element with class controls, using the prev next and finish class. This and many other settings can be modified by passing parameters to the steppedProcess method:

$(document).ready(function() {
  $(".steps-wrapper").steppedProcess({
    startAt : 2,
    stepSelector : '.page'
  });
});

A list of all the options is available at the end of the page here.

License

Copyright (c) 2016 Pierluigi Videsott Licensed under the MIT license.

Readme

Keywords

Package Sidebar

Install

npm i pier5-stepped-process

Repository

github.com/pier5/stepped-process

Homepage

github.com/pier5/stepped-process

Weekly Downloads

2

Version

1.0.0

License

MIT

Last publish

Collaborators

  • pier5
Try on RunKit
Report malware