I. Introduction

1. Official download: https://introjs.com/example/hello-world/index.html

2. Basic configuration

• Setting parameters: Setting multiple formats json format: key:value can set parameters

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

• Setting method (multiple parameter settings)

Keyword: setOptions
introJs().setOptions(
{'prevLabel':'← Previous step','nextLabel':'Next step →','skipLabel':'skip','doneLabel':'complete'}
).start();

• Setting method (single parameter setting)

Keyword: setOption
 introJs().setOption("prevLabel", "last step"). start();

• Element settings for page distribution boot:

 <div id= "demo" data-step= "1" data-intro= "Here is the content of distributed boot... "Data-position=" right ">
  </div>

 data-step: steps
 data-intro: Contents of Distributed Boot
 data-position: boot content display location
 Parameters: left, right, top, bottom (not explained)  

• About the use of pictures:

The html that directly adds image tags to data-intro is still acceptable:         
data-intro="<img src='http://img0.bdstatic.com/img/image/shouye/xinshouye/chongwu119.jpg'>"

II. Implementation steps

1. Download jquery-intro

• See Official Download Address

2. Referring to jquery-intro in the page

<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. Define referenced blocks

stay ready Method Addition intro();
$(document).ready(function(){
	//Dynamic guidelines
	var steps = [];
	steps.push(genStepObj("#Basic, fill in basic information, bottom, etc.
	steps.push(genStepObj("#Basic 2","fill in basic information 2","bottom");
	intro(steps);
}

4. Configure the display of jquery-intro

//Dynamic guidelines
function intro(steps){

	if(!steps){
		console.log("steps is null, return");
		return;
	}
	
	cur_val = 1;
	//Each page has a different cookie variable name, which can not be repeated. When a new version is available, cur_val is updated.
    //Here we simulate that many websites have new version updates only when a boot page appears, the second entry no longer appears, here is COOKIE to judge.
    if ($.cookie('intro_cookie_index') == cur_val){
    	console.log("intro cur_val is " + cur_val);
        return;
     }
	
    introJs().setOptions({
        prevLabel:"Previous step", 
        nextLabel:"Next step",
        skipLabel:"skip",
        doneLabel:"End",
		
        //Each step boot prompt appears sequentially in the corresponding array
        steps: JSON.stringify(steps)

    }).oncomplete(function(){
        //Events that are executed after clicking the skip button (where the corresponding version number is saved to cookie and the validity period is set to 1 day)
        $.cookie('intro_cookie_index',cur_val,{expires:1});
    }).onexit(function(){
        //Events executed after clicking the End button
       $.cookie('intro_cookie_index',cur_val,{expires:1});
    }) .start();            

}


/**
 * Generate a single step object
 * element Specify element ID
 * intro Guideline description
 * position Guiding direction
 */
function genStepObj(element, intro, position){
	var step = {};
	step.element = element;
	step.intro = intro;
	step.position = position;
	return step;
}