本文介绍了三个流行的网页引导库：Intro.js、Shepherd 和 Bootstrap Tour，它们用于帮助用户了解网页功能。Intro.js 特点是简洁、易用和可扩展，提供精美界面。Shepherd 同样简洁易用，源自 MIT 开源项目，界面流畅性稍逊。Bootstrap Tour 则是 TIM 开源项目，使用简单，但无背景遮罩设置。每个库都提供了使用示例和代码演示。
introjs
特点：使用简洁、方便易用，可拓展性强，界面展示精美衔接好。学习使用免费，商业付费。
Intro.js 官网地址：Intro.js
使用demo：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<title>demo</title>
<link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/intro.js/minified/intro.min.js"></script>
<style>
* {margin: 0; padding: 0;}
.f {margin: 30px 50px; background: red;}
.b {display: inline-block;}
</style>
</head>
<body>
<div class="a f" data-step="1" data-intro='欢迎进入XXX页面'>这是第1个引导</div>
<div class="b f" data-step="3" data-intro='完成'>这是第3个引导</div>
<div class="c f" data-step="2" data-intro='这里我们介绍一下使用方法'>这是第2个引导</div>
</body>
<script>
;$(function() {
introJs().setOptions({
'prevLabel': '← 上一步',
'nextLabel': '下一步 →',
'skipLabel': '跳过',
'doneLabel': '完成',
'showBullets': false,//隐藏直接跳转按钮(避免onchangebug)
}).start().onexit(function() {//非常规退出
console.log('建议您看完');
}).oncomplete(function() {//正常完成
console.log('完成');
}).onchange(function(obj) {//已完成当前一步
var curNum = parseInt($(obj).attr('data-step').match(/\d+/)[0]);//当前的下标
$('.tipStep'+ (curNum-1)).hide();//隐藏前一个
$('.tipStep'+ (curNum+1)).hide();//隐藏后一个
$(obj).show();//显示当前
});
});
</script>
</html>
shepherd
特点：使用简洁、方便易用、扩展性强，麻省理工学院开源。界面流畅性较introjs 稍微差一些。
使用demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../static/shepherd/shepherd.min.js"></script>
<link rel="stylesheet" href="../../static/shepherd/shepherd.css" />
<style>
/* 设置指引框的标题高度 */
.shepherd-header {
height: 45px;
}
</style>
</head>
<body>
<div id="welcom" class="hero-welcome">指引开始-----------设置指引出现在div底部</div><br />
<div id="step1" class="hero-including">第一步指引-----指引出现在div底部</div><br />
<div id="step2" class="hero-example">第二步指引-----指引出现在div右边</div><br />
<div id="step3" class="hero-example">第三步指引-----指引出现在div左边</div><br />
</body>
<script>
// 【1】初始化Shepherd并设置默认参数以及第一步引导
var shepherd = new Shepherd.Tour({
// 设置默认引导配置
defaultStepOptions: {
// 引导左上角取消按钮图标的配置
cancelIcon: {
enabled: true, // 默认为true
},
// 指定引导盒子的类名, 用于后续自定义样式, 类名可叠加
classes: 'custom-class-1 shepherd-class-2',
// 滚动方式
scrollTo: {
behavior: 'smooth',
block: 'center'
}
},
// 添加第一步引导
steps: [
{
// 设置引导标题
title: '欢迎使用本产品',
// 设置引导文本
text: '这是第一个引导说明, 你好呀!朋友',
// 设置指向的目标元素
attachTo: {
// 目标元素
element: '.hero-welcome',
// 引导DOM位于目标元素的方位
on: 'bottom'
},
// 设置底部按钮
buttons: [
{
action: function () {
// Shepherd退出引导的方法
return this.cancel();
},
// 颜色是否突出, 设置次要的颜色就不为突出
secondary: true,
text: '退出'
},
{
action: function () {
// Shepherd执行下一步引导的方法
return this.next();
},
text: '下一步'
}
],
id: 'welcome' // 用于Shepherd step的唯一标识符
}
],
// 是否背景突出引导, 默认是false。设置为true即背景为灰色遮罩
useModalOverlay: true
});
// 【2】定义一系列引导步骤
const steps = [
{
title: '第一步标题',
// 可以直接写入html
text: '指引内容第一步内容',
attachTo: {
element: '.hero-including',
on: 'bottom'
},
buttons: [
{
action: function () {
return this.back();
},
secondary: true,
text: '返回'
},
{
action: function () {
return this.next();
},
text: '下一步'
}
],
id: 'step1'
},
{
title: '第二步标题',
text: '指引内容第二步内容',
attachTo: {
element: '.hero-example',
on: 'right'
},
buttons: [
{
action: function () {
return this.back();
},
secondary: true,
text: '返回'
},
{
action: function () {
return this.next();
},
text: '下一步'
}
],
id: 'step2'
},
{
title: '第三步标题',
text: '指引内容第三步内容.',
attachTo: {
element: '.hero-example',
on: 'left'
},
buttons: [
{
action: function () {
return this.back();
},
secondary: true,
text: '返回'
},
{
action: function () {
return this.next();
},
text: '下一步'
}
],
id: 'step3'
}
];
// 【3】将定义好的引导添加进来
shepherd.addSteps(steps);
// 【4】添加后续节点，shepherd允许重复添加步骤
shepherd.addStep({
title: '后续添加',
text: '这是后续添加的步骤',
// 当没有指定依附的元素时, shepherd会选择默认显示在屏幕的中间
buttons: [
{
action: function () {
return this.back();
},
secondary: true,
text: '返回'
},
{
action: function () {
return this.next();
},
text: '下一步'
}
],
id: 'step4'
});
// 【5】启动指引
shepherd.start();
</script>
</html>
bootstrap-tour
特点：使用简洁、方便易用、可扩展性强，TIM开源。
缺点：无背景灰色遮罩设置。
使用demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../../static/bootstrap/css/bootstrap-tour-standalone.min.css" rel="stylesheet">
<script src="../../static/layui/jquery-3.5.1.min.js"></script>
<script src="../../static/bootstrap/js/bootstrap-tour-standalone.min.js"></script>
<style>
.first-div {
background-color: aquamarine;
height: 40px;
}
</style>
</head>
<body>
<div id="my-element" class="first-div">这是第一个索引</div>
<br />
<br />
<div id="my-other-element" class="first-div">这是第二个索引</div>
</body>
<script>
// 定义一个索引
var tour = new Tour({
steps: [
{
element: "#my-element",
title: "这是第一步标题头",
content: "我是第一步"
},
{
element: "#my-other-element",
title: "这个是第二步标题头",
content: "我是第二步"
}
],
template: `<div class='popover tour' style="min-width:300px;">
<div class='arrow'></div>
<h3 class='popover-title'></h3>
<div class='popover-content'></div>
<div class='popover-navigation'>
<button class='btn btn-default' data-role='prev'>« 上一步</button>
<span data-role='separator'>|</span>
<button class='btn btn-default' data-role='next'>下一步 »</button>
<button class='btn btn-default' data-role='end'>关闭</button>
</div>
</div>`,
});
// 开始渲染
tour.init();
// 启动
tour.start();
</script>
</html>
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
