jQuery Steps – An all-in-one wizard plugin that is extremely flexible, compact and feature-rich.

0
257

jQuery Steps – An all-in-one wizard plugin that is extremely flexible, compact and feature-rich.

jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission. Check out the demos and get a first-hand impression!

Features

Accessability support
Make it visible for everyone without extra work – just use it.
Async content loading
Load your content asynchronously via AJAX by calling e.g. aREST service.
Cool transition effects
Beautiful & sleek transition effects complete the offer.
Dynamic Manipulation
Add or remove steps dynamically via API.
Easy Navigation
Navigate in various different way using the keyboard, steps or pager – it is up to you.
State Persistence
Enable the saveState option – this will save your current step position of each individual wizard *.
Form validation made easy
Embed a validation plugin of your choice and customize it like you want – it is just that simple.
Embedded iframe content
Embed your content via an iframe – it feels like it would be a part of your site.
Keyboard navigation
Use your keyboard to navigate through your content.
Multiple wizards
Have multiple wizards on one page or even have nested wizards like you want.
Vertical Navigation
Switch to vertical navigation if you nee
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Demo</title>
  5.         <meta charset=“utf-8”>
  6.         src=“jquery.js”>
  7.         src=“jquery.steps.js”>
  8.     </head>
  9.     <body>
  10.        
  11.             $(“#wizard”).steps();
  12.        
  13.        
    id=“wizard”>

  14.     </body>
  15. </html>
    1. id=“wizard”>
    2.    

      First Step

    3.    
      First Content

    4.  
    5.     <h1>Second Step</h1>
    6.    
      Second Content

    7. </div>

 


Website: http://www.jquery-steps.com/GettingStarted

 


Thanks,

Web Editor

LEAVE A REPLY

Please enter your comment!
Please enter your name here

twenty − 10 =