新手指引
开发者文档
- 更新 v1.4.0: 此组件的css代码被移入了 sui-append.css 中。
1.Intro.js
4.更好的介绍网站和功,以便逐步为您指导项目。
2.容易使用
包括js和css文件， 调价"data-step" 和 "data-intro" 到你的代码。
3.键盘 + 鼠标 控制
用鼠标, 或键盘 "←"控制后退, "→"控制前进, "ENTER" 和 "ESC" 控制退出.
5.快 & 小
仅需4 KB JavaScript 和 2.5 KB CSS (gzip).
6.跨浏览器兼容性
它兼容最近版本的火狐,Chrome和IE8，更好的兼容性需要进一步开发。
备注：插件参考第三方来源：http://usablica.github.io/intro.js/
1.在标签里加属性"data-step"标示是第几步；加"data-intro"添加提示语句；"data-position"控制提示框出现位置，可选left、right、top、bottom-middle-aligned、bottom-right-aligned,不写默认为下方。
2.可用鼠标控制，也可以用键盘控制："←", "→","ENTER" 和 "ESC"控制。
3.调用"$.introJs().start();"可触发新手指引。
可通过introJs传入改变的参数
| 名称 | 默认值 | 说明 |
|---|---|---|
| nextLabel | 下一步 | 下一步按钮上的显示文字 |
| prevLabel | 上一步 | 上一步按钮上的显示文字 |
| skipLabel | 退出 | 退出按钮上的显示文字 |
| doneLabel | 结束 | 结束按钮上的显示文字 |
| tooltipPosition | bottom | data-position初始值 |
| exitOnEsc | true | 是否可用ESC键退出 |
| showStepNumbers | true | 是否显示步骤数 |
| exitOnOverlayClick | true | 是否可点击背景退出 |
| keyboardNavigation | true | 是否可用键盘控制 |
| showButtons | true | 是否限制控制按钮 |
| showBullets | true | 是否显示点点 |
| scrollToElement | true | 是否滚动到下一步骤 |
| overlayOpacity | 0.8 | 背景透明值 |
可通过introJs调用的方法
| 名称 | 说明 | |
|---|---|---|
| clone | 下一步 | 下一步按钮上的显示文字 |
| prevLabel | 上一步 | 上一步按钮上的显示文字 |
| skipLabel | 退出 | 退出按钮上的显示文字 |
| doneLabel | 结束 | 结束按钮上的显示文字 |
| tooltipPosition | bottom | data-position初始值 |