Sing Documentation

Wizard

Twitter Bootstrap Wizard Plugin is used to build wizard-enabled widget.

This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.

To activate it you need to call $("#rootwizard").bootstrapWizard(); on your markup to create wizard.

If you want to add step-by-step wizard validation please check this guide.

Files:

<script src="vendor/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>

Example Markup:

<div id="rootwizard">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
            <ul>
                <li><a href="#tab1" data-toggle="tab">First</a></li>
                <li><a href="#tab2" data-toggle="tab">Second</a></li>
                <li><a href="#tab3" data-toggle="tab">Third</a></li>
                <li><a href="#tab4" data-toggle="tab">Forth</a></li>
                <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
                <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
                <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
            </ul>
        </div>
      </div>
    </div>
    <div class="tab-content">
        <div class="tab-pane" id="tab1">
          1
        </div>
        <div class="tab-pane" id="tab2">
          2
        </div>
        <div class="tab-pane" id="tab3">
            3
        </div>
        <div class="tab-pane" id="tab4">
            4
        </div>
        <div class="tab-pane" id="tab5">
            5
        </div>
        <div class="tab-pane" id="tab6">
            6
        </div>
        <div class="tab-pane" id="tab7">
            7
        </div>
        <ul class="pager wizard">
            <li class="previous first" style="display:none;"><a href="#">First</a></li>
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next last" style="display:none;"><a href="#">Last</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>
    </div>
</div>

Application Wizard

Bootstrap Application Wizard is a ready to use wizard component with simple install process. You don't even need to have any special markup to instantiate it.

<script src="vendor/bootstrap-application-wizard/src/bootstrap-wizard.js"></script>