jBsWizard v1.0.0

Basic Usage

Wrap your Bootstrap Tabs HTML with a DIV Container and add a CSS class or an ID to it.
Select your Element with jQuery and add jBsWizard to it.
When you use multiple element selector to add jBsWizard, then there will be an instance for every Element.

// Include jBsWizard
<link rel="stylesheet" href="path/to/jBsWizard/source/jquery.jBsWizard.min.css">
<script src="path/to/jBsWizard/source/jquery.jBsWizard.min.js"></script>

// Initialize jBsWizard
<script type="text/javascript">
    $(function() {
        $('#j-bs-wizard-example').jBsWizard();
    });
</script>

Options

You can set options as an object for advanced initializing jBsWizard

// set option Object like this, i.e. not using Progress Bar
var options = {
    useProgressBar: false
}

// Initialize jBsWizard
<script type="text/javascript">
    $(function() {
        $('#j-bs-wizard-example').jBsWizard(options);
    });
</script>

Methods

After jBsWizard is initialized, there are accessible methods like .nextStep() or .goToStep(). Set the initialisation to a variable.

<script type="text/javascript">
    $(function() {
        // Initialize jBsWizard and set it to a variable
        var jBsWizard = $('#j-bs-wizard-example').jBsWizard();

        // I.e. go to the second Step (counting starts at 0)
        jBsWizard.goToStep(1);
    });
</script>

Events

jBsWizard triggers events to hook in and increase the Functionality. Every event gives the extra Parameter instance with the whole Instance from jBsWizard.

<script type="text/javascript">
    $(function() {
        // Initialize jBsWizard and set it to a variable
        var jBsWizard = $('#j-bs-wizard-example').jBsWizard();

        // I.e. the goToStep Event with additional extra Parameter 'steps'
        jBsWizard.on('jBsWizard.initializing', function(e, instance, steps) {
            var getSteps = JSON.stringify(steps, null, 4);
            alert(getSteps);
        });
    });
</script>

Example Wizard