intro.js引导说明插件使用

一、下载插件

二、页面引用

只需引用introjs.css的css和intro.js即可

三、使用

1、元素上添加指定好的自定义属性，如下

<div data-step="1" data-intro="这个是步骤1" data-position="right"></div>
<div data-step="2" data-intro="这个是步骤2" data-position="top"></div>

说明

data-step：第几步
data-intro：分布引导的内容
data-position：引导内容显示位置，
参数：left,right,top,bottom
data-tooltipClass: 自定义提示层样式

 js需要写以下代码,此处方法封装一下.在需要的时候调用即可

function guide() {
    introJs().setOptions({
        exitOnOverlayClick: false, //空白处点击不退出
        prevLabel: "上一步", //上一步按钮
        nextLabel: '<img src="images/common/IKnow.png" alt="">',  //下一步按钮
        skipLabel: "跳过",  //跳过按钮
        doneLabel: "结束"  //结束按钮
    }).oncomplete(function () {
        //点击结束按钮后， 执行的事件
    }).onexit(function () {

        //点击跳过按钮后执行的事件

    }).onchange(function(obj) { //已完成当前一步

　　　　var curNum = parseInt($(obj).attr('data-step').match(/\d+/)[0]);//当前的下标

    }).start();

}

//在需要开始引导的地方调用

guide()