Oh… I know you’ll probably say…”Why would you make a plugin that already exists?”. 🙂 Well, why not? It’s true, there are some great plugins out there that do just that. In fact this plugin was inspired by the excellent “jQuery Steps” plugin, created by Rafael Staib. And I am sure that if you Google you’ll find more of them…

However I decided to do one myself as an experiment and because for some reason Rafael’s plugin was mising some things that I needed at the moment and there was also a bug when initializing other jQuery plugins within the Steps plugin. For example the Google maps plugin would not initialize for some reason.

With your comments and perhaps your contributions maybe I can make things better and take it to another level, so please, feel free to give your thoughts – positive and negative. I’ll be very grateful.

The aiiaWizard plugin is Twitter Bootstrap 3.x oriented, thus responsive. It takes your input form elements (or any other HTML element for that matter) and breaks them down into as many steps as you set them to. In fact, in some way the result is very similar to the “Twitter Bootstrap tab plugin, but instead of tabs and corresponding content panels, you have progress buttons and steps. Steps are the elements that hold your form / HTML content.

You can also compare this plugin to a carousel, but then again it is not a carousel. Well, maybe I’ll update the plugin so that it will have different modes (tabs, slider, carousel…). But right now it serves for one purpose only and that is creating a Wizard with steps, plain and simple. The aiiaPlugin may as well be a hybrid between the Tabs Twitter Bootstrap and the carousel plugin if you like.

This plugin allows you to interract with it or to retrieve some information from. The following methods are available:

• isFinalElementShown,
• previous,
• next,
• first,
• getActiveStep

As any good plugin, this one allows you to run your code when the plugin does something. This is a list of currently available callbacks:

$("#wizard").aiiaWizard({
    onInitSuccess: function () {
        //alert("init success");
    },
    onSlideLeftLimitReached: function () {
        //alert("onSlideLeftLimitReached success");
    },
    onSlideLeftFinished: function () {
        //alert("onSlideLeftFinished success");
    },
    onSlideRightLimitReached: function () {
        //alert("onSlideRightLimitReached success");
    },
    onSlideRightFinished: function () {
        //alert("onSlideRightFinished success");
    },
    onButtonPreviousClick: function () {
        // Instead of just sliding to the previous step when clicking the "previous" button, you can override this functionality instead.
        // By doing that you must then explixitly call the "previous" plugin method as shown below if you want to slide to the previous step.
        alert("onButtonPreviousClick");
        $("#wizard").aiiaWizard('previous');
    },
    onButtonNextClick: function () {
        // Instead of just sliding to the next step when clicking the "next" button, you can override this functionality instead.
        // By doing that you must then explixitly call the "next" plugin method as shown below if you want to slide to the next step.
        alert("onButtonNextClick");
        $("#wizard").aiiaWizard('next');
    }
});