Bootstrap Wizard Step maximize to use css from bootstrap. We are using style already in bootstrap for tab
Freelance developer?
I'm available for freelance work
Click to see about me
Enable Boostrap Wizard Step via JavaScript with default options:
$('[data-toggle="boostrap-wizard-step"]').boostrapWizardStep();
You can enable via JavaScript with options:
$('[data-toggle="boostrap-wizard-step"]').boostrapWizardStep({
startStep: 0,
onNextStep: callback,
onBackStep: callback,
onJumpBack: callback,
tabIdentifier: "#wizard-tab",
contentIdentifier: "#wizard-content",
btnNextIdentifier: "#next",
btnPreviousIdentifier: "#previous"
});
You can activate boostrap wizard step without writing any JavaScript by simply specifying
data-toggle=="bootstrap-wizard-step". And you can overide default config with data-next="#next",data-previous="#previous",data-tab="#wizard-tab",data-content="#wizard-content",data-start="0"
<ul data-toggle=="bootstrap-wizard-step" data-next="#next" data-previous="#previous" data-tab="#wizard-tab" data-content="#wizard-content" data-start="0">
<!-- Wizard nav tabs -->
<ul id="wizard-tab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Wizard tab panes -->
<div id="wizard-content" class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
</div>
| Option Name | Description |
|---|---|
| startStep | Set step for start. |
| onNextStep | Callback when user press next button. |
| onBackStep | Callback when user press back button. |
| onJumpBack | Callback when user jump back to before step |
| tabIdentifier | The identifier of tab for find element. You must add # for id and . for class |
| contentIdentifier | The identifier of content for find element. You must add # for id and . for class |
| btnNextIdentifier | The identifier of next button for find element. You must add # for id and . for class |
| btnPreviousIdentifier | The identifier of previous button for find element. You must add # for id and . for class |
| Event Type | Description |
|---|---|
| next.bs.wizard | This event fires on user press next button. May have 2 parameters is event and current index |
| previous.bs.wizard | This event fires on user press previous button. May have 2 parameters is event and current index |
| jumpback.bs.wizard | This event fires on user click to tab for jump back before step. May have 3 parameters is event, current index and jump to index |
$('#wizard').on('next.bs.wizard', function (e,currentIndex) {
});
$('#wizard').on('previous.bs.wizard', function (e,currentIndex) {
});
$('#wizard').on('jumpback.bs.wizard', function (e,currentIndex,jumpToIndex) {
});