This is may help you.
<div class="tsf-wizard tsf-wizard-1">
<div class="tsf-nav-step">
<ul class="gsi-step-indicator triangle gsi-style-1 gsi-transition ">
<li class="current" data-target="step-1">
<a href="#0">
<span class="number">1</span>
<span class="desc">
<label>Account setup</label>
<span>Account details</span>
</span>
</a>
</li>
<!-- ADD YOUR STEPS HERE -->
</ul>
</div>
<!-- BEGIN STEP CONTAINER -->
<div class="tsf-container">
<form class="tsf-content">
<!-- BEGIN STEP-->
<div class="tsf-step step-1 active">
<fieldset>
<legend>Provide your account details</legend>
<div class="row">
<div class="tsf-step-content">
<div class="col-lg-12">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control required" id="email" name="email" placeholder="Email">
</div>
</div>
</div>
</div>
</fieldset>
</div>
<!-- END STEP-->
</form>
<div class="tsf-controls ">
<button type="button" data-type="prev" class="btn btn-left tsf-wizard-btn">
<i class="fa fa-chevron-left"></i> PREV
</button>
<button type="button" data-type="next" class="btn btn-right tsf-wizard-btn">
NEXT <i class="fa fa-chevron-right"></i>
</button>
<button type="submit" data-type="finish" class="btn btn-right tsf-wizard-btn">
FINISH
</button>
</div>
</div>
</div>
$('.your selector').tsfWizard({
stepStyle: 'style1',
stepEffect: 'basic',
showStepNum: true,
stepTransition: true,
validation: false,
navPosition: 'top',
height: 'auto',
showButtons: true,
manySteps: false,
prevBtn: '< class="fa fa-chevron-left"></>i> PREV',
nextBtn: 'NEXT <i class="fa fa-chevron-right"></i>',
finishBtn: 'FINISH',
disableSteps: 'none',
onNextClick: function (e) { },
onPrevClick: function (e) { },
onFinishClick: function (e) { }
});
Option | Description | Values | Default |
---|---|---|---|
stepStyle | Show your multi step style |
style1 style2 style3 style4 style5 style5_circle style6 style7_borderTop style7_borderBottom style7_borderLeft style7_borderRight style7_borderTop_circle style7_borderBottom_circle style7_borderLeft_circle style7_borderRight_circle style8 style8_circle style9 style10 style11 style12 |
style1 |
stepEffect | Show your data special animation effect's. |
basic - Basic bounce - Bounce slideRightLeft - Slide from right to left slideLeftRight - Slide from left to right flip - Flip transformation - Transformation slideDownUp - Slide from down to up slideUpDown - Slide from up to down |
basic |
showStepNum | Show or hide step numbers | true | false | true |
stepTransition | Change steps smoothly | true | false | true |
validation |
Validate form or not.
Note : Validation and showButtons properties not be true same time. |
true | false | false |
navPosition | Multi step navigation position | top | right | left | bottom | 'top' |
height | Set any height (600px,400px etc) | String | 'auto' |
showButtons | Show or hide step controls | true | false | true |
manySteps | If you have many steps. Or your steps will be added dynamically you can use this option | true | false | true |
prevBtn | Previous button text | String | '<i class="fa fa-chevron-left"></i> PREV' |
nextBtn | Next button text | String | 'NEXT <i class="fa fa-chevron-right"></i>' |
finishBtn | Finish button text | String | 'FINISH' |
disableSteps | If you want disable steps, you can use this option |
all – disable all steps except current step after_current – disable after steps except current step before_current – disable before steps except current step none – default value,enable all steps |
'none' |
onNextClick | Function for any issue of your choice | Name of function or anonymous function. First parameter is a element of clicked, second parameter is a number of actual step index, third parameter is jquery wrap for wizard, fourth parametr is validation value. | function(e,from,to, validation){} |
onPrevClick | Function for any issue of your choice | Name of function or anonymous function. First parameter is a element of clicked, second parameter is a number of actual step index, third parameter is jquery wrap for wizard. | function (e,from,to) {} |
onFinishClick | Function for any issue of your choice | Name of function or anonymous function. First parameter is a element of clicked, second parametr is validation value. | function (e, validation) {} |
Name | Description | Return | Example |
---|---|---|---|
goto() | Go to specific index | undefined |
|
getCurrentIndex() | Return a number of actual active step. | number |
|
setDisableSteps(value) | Disable step in wizard | undefined |
|
nextStep() | Go to next step | undefined |
|
previousStep() | Go to previous step | undefined |
|
validate() | Validate current step | undefined |
|
nextButtonLabel() | Set label for next button. | undefined |
|
prevButtonLabel() | Set label for previous button. | undefined |
|
finishButtonLabel() | Set label for finish button. | undefined |
|