181 lines
4.8 KiB
Markdown
181 lines
4.8 KiB
Markdown
|
#[jquery-wizard](https://github.com/amazingSurge/jquery-wizard) ![bower][bower-image] [![devDependency status][devdeps-image]][devdeps-link]
|
||
|
|
|
||
|
|
`jquery-wizard` is a lightweight jquery plugin for creating step-by-step wizards.
|
||
|
|
|
||
|
|
##Getting jquery-wizard
|
||
|
|
|
||
|
|
###Download
|
||
|
|
|
||
|
|
Get the latest build, ready to go:
|
||
|
|
|
||
|
|
* [Development](https://raw.githubusercontent.com/amazingSurge/jquery-wizard/master/dist/jquery-wizard.js) - unminified
|
||
|
|
* [Production](https://raw.githubusercontent.com/amazingSurge/jquery-wizard/master/dist/jquery-wizard.min.js) - minified
|
||
|
|
|
||
|
|
###Build From Source
|
||
|
|
|
||
|
|
If you want build from source:
|
||
|
|
|
||
|
|
git clone git@github.com:amazingSurge/jquery-wizard.git
|
||
|
|
cd jquery-wizard
|
||
|
|
sudo npm install
|
||
|
|
grunt
|
||
|
|
|
||
|
|
Done!
|
||
|
|
|
||
|
|
###Install From Bower
|
||
|
|
|
||
|
|
bower install jquery-wizard.js
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
### Include Files
|
||
|
|
```html
|
||
|
|
<link rel="stylesheet" href="wizard.css">
|
||
|
|
|
||
|
|
<script src="jquery.min.js"></script>
|
||
|
|
<script src="jquery-wizard.min.js"></script>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Html Structure
|
||
|
|
```html
|
||
|
|
<div class="wizard">
|
||
|
|
<ul class="wizard-steps" role="tablist">
|
||
|
|
<li class="active" role="tab">
|
||
|
|
Step 1
|
||
|
|
</li>
|
||
|
|
<li role="tab">
|
||
|
|
Step 2
|
||
|
|
</li>
|
||
|
|
<li role="tab">
|
||
|
|
Step 3
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="wizard-content">
|
||
|
|
<div class="wizard-pane active" role="tabpanel">Step Content 1</div>
|
||
|
|
<div class="wizard-pane" role="tabpanel">Step Content 2</div>
|
||
|
|
<div class="wizard-pane" role="tabpanel">Step Content 3</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Javascript
|
||
|
|
```html
|
||
|
|
<scritp>
|
||
|
|
(function(){
|
||
|
|
$('.wizard').wizard({
|
||
|
|
onFinish: function(){
|
||
|
|
// do something
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
</scritp>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Options
|
||
|
|
```javascript
|
||
|
|
$('.wizard').wizard({
|
||
|
|
step: '.wizard-steps > li',
|
||
|
|
|
||
|
|
getPane: function(index, step){
|
||
|
|
return this.$element.find('.wizard-content').children().eq(index);
|
||
|
|
},
|
||
|
|
|
||
|
|
buttonsAppendTo: 'this',
|
||
|
|
templates: {
|
||
|
|
buttons: function(){
|
||
|
|
var options = this.options;
|
||
|
|
return '<div class="wizard-buttons">'+
|
||
|
|
'<a class="wizard-back" href="#'+this.id+'" data-wizard="back" role="button">'+options.buttonLabels.back+'</a>' +
|
||
|
|
'<a class="wizard-next" href="#'+this.id+'" data-wizard="next" role="button">'+options.buttonLabels.next+'</a>' +
|
||
|
|
'<a class="wizard-finish" href="#'+this.id+'" data-wizard="finish" role="button">'+options.buttonLabels.finish+'</a>' +
|
||
|
|
'</div>';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// state classes
|
||
|
|
classes: {
|
||
|
|
step: {
|
||
|
|
done: 'done',
|
||
|
|
error: 'error',
|
||
|
|
active: 'current',
|
||
|
|
disabled: 'disabled',
|
||
|
|
activing: 'activing',
|
||
|
|
loading: 'loading'
|
||
|
|
},
|
||
|
|
|
||
|
|
pane: {
|
||
|
|
active: 'active',
|
||
|
|
activing: 'activing'
|
||
|
|
},
|
||
|
|
|
||
|
|
button: {
|
||
|
|
hide: 'hide',
|
||
|
|
disabled: 'disabled'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
autoFocus: true,
|
||
|
|
keyboard: true,
|
||
|
|
|
||
|
|
enableWhenVisited: false,
|
||
|
|
|
||
|
|
buttonLabels: {
|
||
|
|
next: 'Next',
|
||
|
|
back: 'Back',
|
||
|
|
finish: 'Finish'
|
||
|
|
},
|
||
|
|
|
||
|
|
loading: {
|
||
|
|
show: function(step) {},
|
||
|
|
hide: function(step) {},
|
||
|
|
fail: function(step) {}
|
||
|
|
},
|
||
|
|
|
||
|
|
cacheContent: false,
|
||
|
|
|
||
|
|
validator: function(step){
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
|
||
|
|
// callbacks
|
||
|
|
onInit: function(){},
|
||
|
|
onNext: function(from, to){},
|
||
|
|
onBack: function(from, to){},
|
||
|
|
onReset: function(){},
|
||
|
|
|
||
|
|
onBeforeShow: function(from, to){},
|
||
|
|
onAfterShow: function(step){},
|
||
|
|
onBeforeHide: function(step){},
|
||
|
|
onAfterHide: function(step){},
|
||
|
|
onBeforeLoad: function(step){},
|
||
|
|
onAfterLoad: function(step){},
|
||
|
|
|
||
|
|
onBeforeChange: function(from, to){},
|
||
|
|
onAfterChange: function(from, to){},
|
||
|
|
|
||
|
|
onStateChange: function(step, enter, state){},
|
||
|
|
|
||
|
|
onFinish: function(){}
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
## Bugs and feature requests
|
||
|
|
|
||
|
|
Anyone and everyone is welcome to contribute. Please take a moment to
|
||
|
|
review the [guidelines for contributing](CONTRIBUTING.md). Make sure you're using the latest version of jquery-wizard before submitting an issue.
|
||
|
|
|
||
|
|
* [Bug reports](CONTRIBUTING.md#bug-reports)
|
||
|
|
* [Feature requests](CONTRIBUTING.md#feature-requests)
|
||
|
|
|
||
|
|
## Copyright and license
|
||
|
|
|
||
|
|
Copyright (C) 2015 amazingSurge.
|
||
|
|
|
||
|
|
Licensed under [the GPL license](LICENSE-GPL).
|
||
|
|
|
||
|
|
[bower-image]: https://img.shields.io/bower/v/jquery-wizard.js.svg?style=flat
|
||
|
|
[bower-link]: https://david-dm.org/amazingSurge/jquery-wizard.js/dev-status.svg
|
||
|
|
|
||
|
|
[devdeps-image]: https://img.shields.io/david/dev/amazingSurge/jquery-wizard.svg?style=flat
|
||
|
|
[devdeps-link]: https://david-dm.org/amazingSurge/jquery-wizard#info=devDependencies
|