参数说明:
steps:[{},{}] //使用JSON配置定义步骤的信息
nextLabel:'next', //下一步按钮标签
prevLabel:'back' //上一个按钮标签
skipLabel:'skip' //跳过按钮标签
doneLabel:'done' //完成按钮标签
hidePrev:'true/false' //隐藏第一步中的上一个按钮
exitOnOverlayClick:'true/false' //单击叠加层时退出介绍
showStepNumbers:'true/false' //是否在红色圆圈中显示步骤编号
showProgress:'true/false' //是否显示介绍进度
keyboardNavigation:'true/false' //是否使用键盘导航
showBullets:'true/false' //是否显示“点点点”进度提示
data-step:显示步骤、提示到第几步(优先级)
data-intro:显示引导的内容
data-position:引导内容显示位置【left,right,top,bottom】
data-tooltipClass: 自定义提示层样式
introJs.start() //开始
introJs.goToStep(2) //跳转到具体的步骤介绍
introJs.onchange(function(){}) //完成每个步骤后,将调用给定的回调函数
1,一般用法:
<link rel="stylesheet" href="../css/introjs.css">
<script src="../js/intro.js"></script>
<div class="div">
<div data-step="2" data-intro="第二步的提示内容!">这是第二步页面展示内容。</div>
<div data-step="1" data-intro="第一步的提示内容!">这是第一步页面展示内容。</div>
<div data-step="3" data-intro="第三步的提示内容!">这是第三步页面展示内容。</div>
</div>
<script>
setTimeout(function(){
introJs().setOptions({
nextLabel: '下一步',
prevLabel: '上一步',
doneLabel: '完成',
exitOnOverlayClick: false,
showStepNumbers: true,
}).start();
})
</script>
2,在Vue中使用
注意:在data-step、data-intro前要有":"
<link rel="stylesheet" href="../css/introjs.css">
<script src="../js/intro.js"></script>
<script src="../js/vue.js"></script>
<div id="app">
<div v-for="item in steps">
<div :data-step=item.step :data-intro=item.dataIntro>{{item.value}}</div>
</div>
</div>
<script>
setTimeout(function(){
introJs().setOptions({
nextLabel: '下一步',
prevLabel: '上一步',
doneLabel: '完成',
exitOnOverlayClick: false,
showStepNumbers: true,
}).start();
})
</script>
<script>
var vue = new Vue({
el:"#app",
data:{
steps:[
{
dataIntro:"第一步的提示内容!",
value:"这是第一步页面展示内容。",
step:1
},
{
dataIntro:"第二步的提示内容!",
value:"这是第二步页面展示内容。",
step:2
},
{
dataIntro:"第三步的提示内容!",
value:"这是第三步页面展示内容。",
step:3
}
]
}
})
</script>
效果展示:
推荐:
https://www.ibm.com/developerworks/cn/web/wa-interactive-doc-javascript-introjs-bluemix-trs/index.html
https://www.cnblogs.com/lhb25/p/15-best-jquery-site-tour-plugins.html
官网API:
https://introjs.com/docs/intro/api