stepper-jquery.js

(function ($) {
    "use strict";

    var Stepper = function (options) {

        var defaults = {
            steps: [],
            currentStep: 0,
        };

        var styles = {
            
        };

        this.build = function (container) {
            container = $(container);

            var steps = options.steps || defaults.steps;

            var html = $('<div>', { 'class': 'stepper' });

            $.each(steps, function (index, step) {
                index += 1;

                var stepHtml = $('<div>', { 'class': 'step' });
                stepHtml
                    .append(
                        $('<label>', { 'class': 'step-number' })
                            .append(
                                $('<span>').text(index)))
                    .append($('<label>').text(step));
               
                html.append(stepHtml);
            });

            container.empty();
            container.prepend($('<hr>'))
            container.append(html);
        };

    };
   
    $.fn.stepper = function (options) {
        var stepper = new Stepper(options);
        stepper.build(this);
    };

})(jQuery);