Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dealfonso/jq-wizard

Easily create self-managed wizards using jquery (and bootstrap)
https://github.com/dealfonso/jq-wizard

bootstrap javascript jquery self-managed wizard wizard-steps

Last synced: about 7 hours ago
JSON representation

Easily create self-managed wizards using jquery (and bootstrap)

Awesome Lists containing this project

README 

        
# jQuery Wizard (jq-wizard)



This is a component to create seld-managed wizards, using jQuery.



It is easy to use in your projects, as you just need to define each of your steps inside a div with a class, add the "next" and "previous" buttons, and call the `wizard()` function:

```html



    


        
This is the first step


    


    


        
This is the second step


    


    


        
This is the last step


    


    


        Prev

        Next

    


      



$(function() {

    $('#mywizard').wizard();

})



```



## Examples



You have several examples in this folder (some of them use bootstrap):

- *simple.html* that contains a div-based example ([See it in action at codepen](https://codepen.io/dealfonso/pen/PoNgjKW)).

- *modal.html* that contains a simple wizard inside a bootstrap modal ([See it in action at codepen](https://codepen.io/dealfonso/pen/XWdQgzO)).

- *modalconditional.html* contains an example with a multiple workflow for the wizard ([See it in action at codepen](https://codepen.io/dealfonso/pen/VwaOXEY)).

- *modalform.html* that contains a full wizard example with tab validation and other features, inside a form that can be submitted to your server ([See it in action at codepen](https://codepen.io/dealfonso/pen/eYZoRVQ)).



## Using



You need to include `jq-wizard.js` either from your cloned repo, or from a CDN, after jQuery. e.g.:



```html

    

    

```



## Customization



jq-wizard is highly customizable. You just need to pass an object to the "wizard" function, that overrides the default values:



```javascript

    $('#mywizard').wizard({

        onnext: function(stepname, steppos) { return true },

        ...

    })

```



The meaning of the values and default values are the next:



   - *onnext*: Function called *before* passing to the next step (will go to next in case that returns true).

        - Default: `function(stepname, steppos) { return true }`

   - *onprev*: Function called *before* passing to the prev step (will go to next in case that returns true).

        - Default: `function(stepname, steppos) { return true }`

   - *onstep*: Function called when showing a step (if arrived clicking on "next" button, will be called *AFTER* onnext or onprev)

        - Default: `function(stepname, steppos) { return true }`

   - *onend*: Function called *before* accepting the end click (will execute the default behaviour of the command in case that returns true).

        - Default: `function(stepname, steppos) { return true }`

   - *onbegin*: Function called whenever the script "begin" is called.

        - Default: `function() { return true }`

   - *hidefnc*: Method called when an object has to be hidden (e.g. the wizard-tab div or btn-prev button (if autohideprev is true)); maybe you want to set a custom class, instead.

        - Default: `function($obj) { $obj.hide() }`

   - *showfnc*: Method called when an object has to be shown (e.g. the wizard-tab div or btn-prev button (if autohideprev is true)); maybe you want to set a custom class, instead.

        - Default: `function($obj) { $obj.show() }`

   - *stepobject*: Selector to select the step indicators

        - Default: `.step`

   - *stepactiveclass*: Class used to mark those steps that have already been done

        - Default: `active`

   - *tabselector*: Selector for each tab.

        - Default: `div.wizard-tab`

   - *stepnameattr*: Attribute used to provide the name of the step

        - Default: `stepname`

   - *autohidenext*: If true, hides "next" button if disabled

        - Default: `true`

   - *autohideprev*: If true, hides "prev" button if disabled

        - Default: `false`

   - *autohideend*: If true, hides "end" button if disabled

        - Default: `true`

   - *autofocus*: If true, automatically sets the focus on the first input INSIDE the tab, when shown.

        - Default: `true`



## Events



The wizard also triggers two events, and you can subscribe to them:



   - *jq-wizard.begin*: Called whenever the "begin" function is called (it is also triggered when the wizard is created). 

     - Handler: `begin(obj, stepname, steppos)`



   - *jq-wizard.update*: Called whenever the interface is updated (i.e. when the step is shown). It is also triggered when the wizard is created.

     - Handler: `update(obj, stepname, steppos)`



In case that you want to receive the events during the creation, you must subscribe to the events before creating the wizard. E.g.:



```javascript

     $('#mywizard').on('jq-wizard.update', function(obj, stepname, steppos) {

          console.log("interface just updated in step: ", stepname);

     }).wizard();

```