“Step Form Wizard” Documentation by “Jiří Waśniowski” v2.3

---

“Step Form Wizard 2”
POSTED BY GANJAPARKER

---

Table of Contents

1. HTML Structure
2. CSS Files and Structure
3. JavaScript

---

A) HTML Structure - top

Plugin generates responsive HTML code. This generated code can be described as two blocks. One for step navigation and second for content.

Your code must have certain structure, so that plugin can create step navigation from your code. In default setting is important tag <form> and this tag must have children tags <fieldset>. These fieldsets will be turned in to the navigation steps. Each fieldset should contain tag <legend> that will be a name of navigation step. You can change this elements with options stepElement and stepNameElement, but still you have to keep nesting of structure. If you have some other elements between <fieldset> and <form>, then it can break layout of the wizard, but it depends on behavior of these elements

Generate this:

---

B) CSS Files and Structure - top

I'm using CSS files for this plugin. These css files contain specific styling for layout and theme. There are seven css files. Five with specific theme, one without any theme and one with all themes. I recomend for production version to choose the file that is named as theme you will be using. You can overwrite these styles. If you use ID in styles, you can be sure, that you overwrite default styles. Important thing is media queries, this help you with responsive look, but you must set max-width and min-width depending on your css framework or your media queries in your site styles.
Additional scss files are attached for easy color change or modification of original themes (you can use some online compiler for generate css).

Overwriting styles:

---

C) JavaScript - top

This plugin uses in examples four Javascript files, but only jQuery is necessary for proper function of the wizard.

1. jQuery
2. jQuery custom content scroller
3. Parsley - javaScript form validation library
4. jQuery Validation plugin - javaScript form validation library
5. My custom plugin scripts

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. Custom scrollbar is plugin for jQuery and this plugin uses its function for better look of scrollbar. If you want, feel free to use another plugin for scrollbar or none.
   Link to plugin
3. Parsley library provide very powerful and easy validating forms. But you can use your favorite validation plugin.
   http://parsleyjs.org/
4. jQuery Validation Plugin also provide powerful and easy validating forms.
   http://jqueryvalidation.org/
5. Generating and animation is covered in this file. This file has standard look of jQuery plugins.
   

   The easiest way to call plugin is:

   $("#wizard").stepFormWizard();

   Where #wizard is ID of some form element with fieldsets and legends.

   If you need to change some options, you will call plugin like this:

   $("#wizard").stepFormWizard({
       showNav: 'left',
       height: '300'
   });

   For more options look here offline or ajoke.cz/wizard2 online

   For more examples view offline:
   Default
   Change theme
   Transition effects
   Height settings
   Navigation positions
   RTL support
   Events
   Different Structure and tabs look
   API methods
   Validation with ParsleyJS
   Validation with jQuery Validation plugin
   Summary step
   Content of step load via Ajax
   Example of checkout
   How hide content of wizard while page is loading
   How use modal window in the wizard
   How use icons instead of numbers
   online: ajoke.cz/wizard2

---

Once again, thank you so much for purchasing this jQuery plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugin on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Ajoke

Go To Table of Contents

---