一、简介

设置参数： 设置多个格式 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':'完成'}
).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-intro 中直接加入图片标签的html尚可：         
data-intro="<img src='http://img0.bdstatic.com/img/image/shouye/xinshouye/chongwu119.jpg'>"

二、实现步骤

1、下载jquery-intro

见官方下载地址

官方下载：https://introjs.com/example/hello-world/index.html

2、在页面中引用jquery-intro

<link rel="stylesheet" type="text/css" href="${path}/resource/js/jquery-intro/introjs.min.css" />
<script type="text/javascript" src="${path}/resource/js/jquery-intro/intro.min.js"></script>

3、定义引用的区块

在ready方法中添加方法 intro();
$(document).ready(function(){
	//动态指引
	var steps = [];
	steps.push(genStepObj("#basic", "填写基本信息", "bottom"));
	steps.push(genStepObj("#basic2", "填写基本信息2", "bottom"));
	intro(steps);
}

4、配置jquery-intro的显示

//动态指引
function intro(steps){
	if(!steps){
		console.log("steps is null, return");
		return;
	}
	cur_val = 1;
	//每个页面设置不同的cookie变量名称，不可以重复，有新版本时，更新cur_val
    //这里模拟很多网站有新版本更新时才出现一次引导页， 第二次进入进不再出现， 这里有COOKIE来判断
    if ($.cookie('intro_cookie_index') == cur_val){
    	console.log("intro cur_val is " + cur_val);
        return;
     }
    introJs().setOptions({
        prevLabel:"上一步", 
        nextLabel:"下一步",
        skipLabel:"跳过",
        doneLabel:"结束",
		
        //对应的数组，顺序出现每一步引导提示
        steps: JSON.stringify(steps)

    }).oncomplete(function(){
        //点击跳过按钮后执行的事件(这里保存对应的版本号到cookie,并且设置有效期为1天）
        $.cookie('intro_cookie_index',cur_val,{expires:1});
    }).onexit(function(){
        //点击结束按钮后， 执行的事件
       $.cookie('intro_cookie_index',cur_val,{expires:1});
    }) .start();            
}

/**
 * 生成单个step对象
 * element 指定元素ID
 * intro 指引描述
 * position 指引方向
 */
function genStepObj(element, intro, position){
	var step = {};
	step.element = element;
	step.intro = intro;
	step.position = position;
	return step;
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/5171