intro.js网站页面使用分步引导插件

intro.js插件Git项目地址：https://github.com/usablica/intro.js/

intro.js官网地址：http://introjs.com/

设置参数：

设置多个格式 json格式：

key:value

可设置参数

nextLabel: "Next →",
prevLabel: "← Back",
skipLabel: "Skip",
doneLabel: "Done",
tooltipPosition: "bottom",
tooltipClass: "",
highlightClass: "",
exitOnEsc: !0,
exitOnOverlayClick: !0,
showStepNumbers: !0,
keyboardNavigation: !0,
showButtons: !0,
showBullets: !0,
showProgress: !1,
scrollToElement: !0,
overlayOpacity: 0.8,
positionPrecedence: ["bottom", "top", "right", "left"],
disableInteraction: !1

设置方法（多个参数设置）
关键字：setOptions

introJs().setOptions({

'prevLabel':'← 上一步',

'nextLabel':'下一步 →',

'skipLabel':'跳过',

'doneLabel':'完成',

'hints': [
{
element: document.querySelector('#step1'),
hint: "This is a tooltip.",
hintPosition: 'top-middle'
},
{
element: '#step2',
hint: 'More features, more fun.',
position: 'left'
},
{
element: '#step4',
hint: "<b>Another</b> step.",
hintPosition: 'top-middle'
}
]

}).start();

设置方法(单个参数设置)
关键字：setOption

introJs().setOption("prevLabel","上一步").start();

页面分布引导的元素设置：

<div id="demo" data-step="1" data-intro="这里是分布引导的内容……" data-position="right">
</div>

说明：

data-step：第几步

data-intro：分布引导的内容

data-position：引导内容显示位置，

参数：left,right,top,bottom(不解释)

data-tooltipClass: 自定义提示层样式

data-highlightClass：自定义动画提示圆点样式

关于使用图片说明：

方法一： 在 data-intro 中直接加入图片标签的html尚可：

data-intro="<img src='http://img0.bdstatic.com/img/image/shouye/xinshouye/chongwu119.jpg'>"

其它方法参考官方文档：

http://introjs.com/docs/intro/api/

本文固定链接: http://www.webzsky.com/?p=1104 | 蓝戒的博客