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 |