新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

新手指引

开发者文档

  • 更新 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初始值