Wizard
@@adsensePage 1
Page 2
Page 3
Declarative style with attribute data-role
<div class="wizard" data-role="wizard">
<div class="steps">
<div class="step">Page 1</div>
<div class="step">Page 2</div>
<div class="step">Page 3</div>
</div>
</div>
JavaScript style
<div class="wizard" id="wizard">
<div class="steps">
<div class="step">Page 1</div>
<div class="step">Page 2</div>
<div class="step">Page 3</div>
</div>
</div>
<script>
$(function)(){
$("#wizard").wizard();
};
</script>
Options
| Parameter | Data-* | Type | Default value | Description |
| stepper | data-stepper | boolean | true | show, hide stepper subcomponent |
| stepperType | data-stepper-type | string | default | define a type of stepper: square, cycle, diamond |
| stepperClickable | data-stepper-clickable | boolean | false | change wizard step by stepper item click |
| startPage | data-start-page | int | default | determines which page to start the wizard |
| finishStep | data-finish-step | int | default | determines which page to finish the wizard and activate finish button |
| locale | data-locale | string | en | determines locale (language) for wizard buttons |
| buttons | data-buttons | object | {cancel: true, help: true, prior: true, next: true, finish: true} | when a declarative definition of parameters parameter type of the object is specified in JSON format |
Customize buttons
Buttons can be individually visually configured:
buttons: {
btn_type: {
show: true || false,
title: 'Cancel',
cls: 'css class',
group: 'right' || 'left'
}
}
Page 1
Page 2
Page 3
Events
| Event | Data-* | Params | Description |
| onCancel | data-on-cancel | (page, wiz) | The event fired when the button is pressed Cancel |
| onHelp | data-on-help | (page, wiz) | The event fired when the button is pressed Help |
| onPrior | data-on-prior | (page, wiz) | The event fired when the button is pressed Prior |
| onNext | data-on-next | (page, wiz) | The event fired when the button is pressed Next |
| onFinish | data-on-finish | (page, wiz) | The event fired when the button is pressed Finish |
| onPage | data-on-page | (page, wiz) | The event fired when the page changed |
| onStepCLick | data-on-step-cLick | (step) | The event fired when the stepper item is pressed |