https://github.com/sinri/guidepages.js
plugin for guide with pages in JavaScript
https://github.com/sinri/guidepages.js
Last synced: 4 months ago
JSON representation
plugin for guide with pages in JavaScript
- Host: GitHub
- URL: https://github.com/sinri/guidepages.js
- Owner: sinri
- License: mit
- Created: 2017-05-04T07:55:42.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-08T07:23:55.000Z (about 9 years ago)
- Last Synced: 2025-06-21T04:43:49.608Z (12 months ago)
- Language: HTML
- Size: 7.81 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# guidePages.js
plugin for guide with pages in JavaScript
一直想弄一个类似安装程序的向导的模型给前端页面用。
于是做了强自定义的guidePages.js,不过感觉这一个还是太吃内存，不知道是不是我的错觉。
简化了一下出了Lite版本，感觉基本能支持了。
License MIT
# Usage of guidePagesLite.js
You can refer to the sample file `sample_lite.html`.
## Design your steps
You must determine what steps you need in your guide, in the sample, only three steps involved.
Commonly, there would be three control buttons:
* `cancel` (always available, or not exists at all),
* `previous` (hidden on first step),
* `next` (as `submit` on final step).
For these buttons, action `cancel`, `step_previous` and `step_next` and `submit` should be defined.
## Initialize
### As of HTML
Make each step into a `div` tag and give them special `id`.
You can put control buttons within each step div, or make them independently outside.
### As of JavaScript
Add the following code.
```js
// set up a reference of GuidePagesLite
var guide=GuidePagesLite;
// clear the data of guide
guide.init();
// repeat this line as you need, with different div ids.
guide.addStep('step_div');
// set up what you want to do when cancel. such as close window or sth else.
guide.setCancelDelegate(function(){
//
});
// set up what you want to do for submitting.
guide.setDoneDelegate(function(){
//
});
// this is designed for control,
// you can decide if the guide should turn to given come_div_id by setting return boolean,
// type given as `prev` or `next`.
guide.setStepOverDelegate(function (current_div_id, come_div_id, type) {
//
});
// finally set off the guide
guide.next();
```