Dashboard
Applications
Pages
UI Elements
Shaira Diaz

Premium Member

Wizards

jQuery Steps, an all-in-one wizard plugin that is extremely flexible, compact and feature-rich. Read the Official jQuery Steps Documentation for a full list of instructions and other options.

Basic Wizard

Below is an example of a basic horizontal form wizard.

Personal Information

Try the keyboard navigation by clicking arrow left or right!

Billing Information

Wonderful transition effects.

Payment Details

The next and previous buttons help you to navigate through your content.

$('#wizard1').steps({
  headerTag: 'h3',
  bodyTag: 'section',
  autoFocus: true,
  titleTemplate: '<span class="number">#index#</span> <span class="title">#title#</span>'
});



With Validation

A basic form wizard with form validation using Parsley js form validation plugin.

Personal Information

Try the keyboard navigation by clicking arrow left or right!

Billing Information

Wonderful transition effects.

Payment Details

The next and previous buttons help you to navigate through your content.

$('#wizard2').steps({
  headerTag: 'h3',
  bodyTag: 'section',
  autoFocus: true,
  titleTemplate: '<span class="number">#index#</span> <span class="title">#title#</span>',
  onStepChanging: function (event, currentIndex, newIndex) {
    if(currentIndex < newIndex) {
      // Step 1 form validation
      if(currentIndex === 0) {
        var fname = $('#firstname').parsley();
        var lname = $('#lastname').parsley();

        if(fname.isValid() && lname.isValid()) {
          return true;
        } else {
          fname.validate();
          lname.validate();
        }
      }

      // Step 2 form validation
      if(currentIndex === 1) {
        var email = $('#email').parsley();
        if(email.isValid()) {
          return true;
        } else { email.validate(); }
      }
    // Always allow step back to the previous step even if the current step is not valid.
    } else { return true; }
  }
});



Vertical Orientation

A basic content wizard with vertical orientation.

Personal Information

Try the keyboard navigation by clicking arrow left or right!

Billing Information

Wonderful transition effects.

Payment Details

The next and previous buttons help you to navigate through your content.

$('#wizard3').steps({
  headerTag: 'h3',
  bodyTag: 'section',
  autoFocus: true,
  titleTemplate: '<span class="number">#index#</span> <span class="title">#title#</span>',
  stepsOrientation: 1
});



Tab Variation

A basic content wizard with custom style variation of the steps.

Personal Information

Try the keyboard navigation by clicking arrow left or right!

Billing Information

Wonderful transition effects.

Payment Details

The next and previous buttons help you to navigate through your content.

$('#wizard4').steps({
  headerTag: 'h3',
  bodyTag: 'section',
  autoFocus: true,
  titleTemplate: '<span class="number">#index#</span> <span class="title">#title#</span>'
});



© 2023. Dashbyte. All Rights Reserved. Created by: Themepixels