Skip to content

A simple jquery + bootstrap plugin that creates and moves a very simple wizard

Notifications You must be signed in to change notification settings

vasilevich/wizardify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm version

wizardify

A simple jquery plugin that converts forms into simple wizards.

Usage and examples

  • Install.
yarn add wizardify
npm install wizardify
  • use examples
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
       <link rel="stylesheet" href="dist/css/wizardify.css">
       <form id="wizard" role="form" action="" method="post" class="f1">
                           <div class="f1-steps">
                               <div class="f1-progress">
                                   <div class="f1-progress-line"></div>
                               </div>
                               <div class="f1-step">
                                   <div class="f1-step-icon"><i class="fa fa-user"></i></div>
                                   <p>about</p>
                               </div>
                               <div class="f1-step">
                                   <div class="f1-step-icon"><i class="fa fa-key"></i></div>
                                   <p>account</p>
                               </div>
                               <div class="f1-step">
                                   <div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
                                   <p>social</p>
                               </div>
                           </div>
                           <fieldset>
                               <h4>Tell us who you are:</h4>
                               <div class="form-group">
                                   <label class="sr-only" for="f1-first-name">First name</label>
                                   <input type="text" name="f1-first-name" placeholder="First name..."
                                          class="f1-first-name form-control" id="f1-first-name">
                               </div>
                               <div class="form-group">
                                   <label class="sr-only" for="f1-last-name">Last name</label>
                                   <input type="text" name="f1-last-name" placeholder="Last name..."
                                          class="f1-last-name form-control" id="f1-last-name">
                               </div>
                               <div class="form-group">
                                   <label class="sr-only" for="f1-about-yourself">About yourself</label>
                                   <textarea name="f1-about-yourself" placeholder="About yourself..."
                                             class="f1-about-yourself form-control" id="f1-about-yourself"></textarea>
                               </div>
                               <div class="f1-buttons">
                                   <button type="button" class="btn btn-next">Next</button>
                               </div>
                           </fieldset>
       
                           <fieldset>
                               <h4>Set up your account:</h4>
                               <div class="form-group">
                                   <label class="sr-only" for="f1-email">Email</label>
                                   <input type="text" name="f1-email" placeholder="Email..." class="f1-email form-control"
                                          id="f1-email">
                               </div>
                               <div class="form-group">
                                   <label class="sr-only" for="f1-password">Password</label>
                                   <input type="password" name="f1-password" placeholder="Password..."
                                          class="f1-password form-control" id="f1-password">
                               </div>
                               <div class="form-group">
                                   <label class="sr-only" for="f1-repeat-password">Repeat password</label>
                                   <input type="password" name="f1-repeat-password" placeholder="Repeat password..."
                                          class="f1-repeat-password form-control" id="f1-repeat-password">
                               </div>
                               <div class="f1-buttons">
                                   <button type="button" class="btn btn-previous">Previous</button>
                                   <button type="button" class="btn btn-next">Next</button>
                               </div>
                           </fieldset>
       
                           <fieldset>
                               <h4>Social media profiles:</h4>
                               <div class="form-group">
                                   <label class="sr-only" for="f1-facebook">Facebook</label>
                                   <input type="text" name="f1-facebook" placeholder="Facebook..."
                                          class="f1-facebook form-control" id="f1-facebook">
                               </div>
                               <div class="form-group">
                                   <label class="sr-only" for="f1-twitter">Twitter</label>
                                   <input type="text" name="f1-twitter" placeholder="Twitter..."
                                          class="f1-twitter form-control" id="f1-twitter">
                               </div>
                               <div class="form-group">
                                   <label class="sr-only" for="f1-google-plus">Google plus</label>
                                   <input type="text" name="f1-google-plus" placeholder="Google plus..."
                                          class="f1-google-plus form-control" id="f1-google-plus">
                               </div>
                               <div class="f1-buttons">
                                   <button type="button" class="btn btn-previous">Previous</button>
                                   <button type="button" class="btn btn-reset">reset</button>
                                   <button type="submit" class="btn btn-submit">Submit</button>
                               </div>
                           </fieldset>
       
                       </form>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       <script src="src/js/wizardify.js"></script>
       <script>
           $("#wizard").wizardify({
                   /**
                    * override to not allow or allow next with conditions
                    * @param step
                    * @param fieldSet
                    * @param nextStep
                    * @param nextFieldSet
                    * @returns {boolean} if true the next step will appear, if not then it won't, to switch step asynchronously:  nextStep.trigger("switchTo");
                    */
                   onNext: (step, fieldSet, nextStep, nextFieldSet) => {
                       //  nextStep.trigger("switchTo");  //async
                       return true; //sync
                   },
                   /**
                    * override to not allow or allow previous with conditions
                    * @param step
                    * @param fieldSet
                    * @param nextStep
                    * @param nextFieldSet
                    * @returns {boolean} if true the previous step will appear, if not then it won't, to switch step asynchronously:  nextStep.trigger("switchTo");
                    */
                   onPrevious: (step, fieldSet, nextStep, nextFieldSet) => {
                       //  nextStep.trigger("switchTo");  //async
                       return true; //sync
                   },
                   /**
                    * override to not allow or allow finish with conditions
                    * @returns {boolean}
                    */
                   onFinish: () => {
                       return true;
                   },
                   /**
                    * override to not allow or allow reset with conditions
                    * @returns {boolean}
                    */
                   onReset: () => {
                       return true;
                   },
                   /**
                    * When a step is clicked directly, this method runs, true/false decides wether to allow it.
                    * @param step
                    * @param fieldSet
                    * @param nextStep
                    * @param nextFieldSet
                    * @returns {boolean} if true the clicked step will appear, if not then it won't, to switch step asynchronously:  nextStep.trigger("switchTo");
                    */
                   onStepClick: (step, fieldSet, nextStep, nextFieldSet) => {
                       //  nextStep.trigger("switchTo");  //async
                       return true; //sync
                   },
                   /**
                    * boolean true or false.
                    */
                   rtl: $(document).attr("dir") === "rtl" ? true : false,
                   /**
                    * Steps are clickable and can move around the wizard
                    */
                   stepClickable: true,
                   /**
                    * Jquery animation to use to make the field appear, eg fadeIn , slideDown and others (check jquery docs).
                    */
                   fieldAppearAnimation: "fadeIn",
                   /**
                    * Jquery field appear timeout check jquery documentation for fadeIn and slideDown for more details.
                    */
                   fieldAppearAnimationTimeout: 400,
                   /**
                    * Jquery animation to use to make the field appear, eg fadeOut , slideUp and others (check jquery docs).
                    */
                   fieldDisappearAnimation: "fadeOut",
                   /**
                    * Jquery field appear timeout check jquery documentation for fadeOut and slideUp for more details.
                    */
                   fieldDisappearAnimationTimeout: 400,
               });
       </script>           

License

MIT license

Credits

This project was originally downloaded from:
https://azmind.com/bootstrap-wizard/

After downloading this project I fully changed most of the structure and converted it into a jquery plugin. moreover added many new things such as RTL support, and clickable steps support, reset, events such as onNext onPrevious onReset onSubmit and more.

About

A simple jquery + bootstrap plugin that creates and moves a very simple wizard

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published