新手指导intro.js基本属性和API

安装

npm install intro.js --save

写在HTML的基本属性

data-intro 步骤的工具提示文本
data-step 可选地定义步骤的数目(优先级)
data-tooltipClass：可选地为工具提示定义CSS类
data-highlightClass：可选地将CSS类追加到helperLayer
data-position 可选择地定义工具提示的位置，top, left, right, bottom, bottom-left-aligned(与bottom), bottom-middle-aligned, bottom-right-aligned或auto(检测元素的位置并自动分配正确的位置)。默认值是bottom
data-scrollTo：可以选择定义要滚动到的元素，element或tooltip。默认值是element.
data-disable-interaction 若要禁用与突出显示框内的元素的交互，true或false(也1或0).
data-hint 提示提示文本
data-hintPosition：可以选择定义提示的位置。备选方案：top-middle, top-left, top-right, bottom-left, bottom-right, bottom-middle, middle-left, middle-right, middle-middle。默认：top-middle

API

//设置提示框属性
intro().setOptions({
	//下一步按钮的显示名称
	nextLabel: ‘Next →’,
	//上一步按钮的显示名称 
	prevLabel: ‘← Back’,
	//跳过按钮的显示名称
	skipLabel: ‘Skip’,
	// 结束按钮的显示名称
	doneLabel: ‘Done’,
	// 引导说明框相对高亮说明区域的位置
	tooltipPosition: ‘bottom’,
	// 引导说明文本框的样式
	tooltipClass: ‘’,
	// 说明高亮区域的样式
	highlightClass: ‘’,
	// 是否使用键盘Esc退出
	exitOnEsc: true,
	// 是否允许点击空白处退出
	exitOnOverlayClick: true,
	// 是否显示说明的数据步骤
	showStepNumbers: true,
	// 是否允许键盘来操作
	keyboardNavigation: true,
	// 是否按键来操作
	showButtons: true,
	// 是否使用点点点显示进度
	showBullets: true,
	// 是否显示进度条
	showProgress: false,
	// 是否滑动到高亮的区域
	scrollToElement: true,
	// 遮罩层的透明度
	overlayOpacity: 0.8,
	// 当位置选择自动的时候，位置排列的优先级
	positionPrecedence: [“bottom”, “top”, “right”, “left”],
	// 是否禁止与元素的相互关联
	disableInteraction: false,
	// 默认提示位置
	hintPosition: ‘top-middle’,
	// 默认提示内容
	hintButtonLabel: ‘Got it’
})
//开始介绍定义的元素
intro().start()
//将回调设置为介绍完成后的回调。
intro().oncomplete(()=> {
  alert("end of introduction");
});
//点击高亮地方之外触发的
intro().onexit(() =>{
  //可以让页面回到顶部
  document.body.scrollTop = document.documentElement.scrollTop = 0;
});
//可以获取下标
intro().onchange((obj) => {// 已完成当前一步  
	const num = parseInt($(obj).attr('data-step').match(/\d+/)[0]);// 当前的下标  
});