引导页插件Intro.js、driver.js
intro.js
1. 引入js 和css
intro.js
introjs.css
）
2. intro.js 参数说明
this._options = {
/* 下一步按钮的显示名称 */
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'
};
3、例子
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie-1.4.1.min.js" ></script>
<script src="js/intro.js" type="text/javascript"></script>
<link href="css/introjs.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function(){
intro();
});
//每次页面加载时调用即可
function intro(num){
//这个变量可以用来存取版本号， 系统更新时候改变相应值
cur_val = 1;
//判断函数所接收变量的长度
if (arguments.length ==0)
{
//每个页面设置不同的cookie变量名称，不可以重复，有新版本时，更新cur_val
//这里模拟很多网站有新版本更新时才出现一次引导页， 第二次进入进不再出现， 这里有cookie来判断
if ($.cookie("intro_cookie_index") == cur_val)
{
return;
}
}
introJs().setOptions({
//对应的按钮
prevLabel:"上一步",
nextLabel:"下一步",
skipLabel:"关闭",
doneLabel:"结束",
exitOnOverlayClick: false,// 是否允许点击空白处退出，默认true：允许
showStepNumbers: true,// 是否显示说明的数据步骤 默认true:显示
//对应的数组，顺序出现每一步引导提示
steps: [
{
//第一步引导
//这个属性类似于jquery的选择器， 可以通过jquery选择器的方式来选择你需要选中的对象进行指引
element: "#div1",
//这里是每个引导框具体的文字内容，中间可以编写html代码
intro: "这是第一个div~~",
//这里可以规定引导框相对于选中对象出现的位置 top,bottom,left,right
position: "right"
},
{
//第二步引导
element: "#div2",
intro: "这是第二个div~~",
position: "left"
},
{
//第三步引导
element: ".div3",
intro: "<a href='www.cnblogs.com'>这是第三个div</a>~~",
position: "bottom"
}
]
}).oncomplete(function(){
//点击跳过按钮后执行的事件(这里保存对应的版本号到cookie,并且设置有效期为30天）
$.cookie("intro_cookie_index",cur_val,{expires:30});
}).onexit(function(){
//点击结束按钮后， 执行的事件
$.cookie("intro_cookie_index",cur_val,{expires:30});
}) .start();
}
</script>
</head>
<body>
<button onclick="intro(2)">操作说明</button>
<div id="div1">这里出现第一步引导</div>
<div id="div2">这里出现第二步引导</div>
<div class="div3">这里出现第三步引导</div>
</body>
</html>
driver.js
vue引用driver.js
