前端新手引导的简单实现【Intro.js插件】

最新推荐文章于 2024-07-31 10:53:27 发布

上网的虫不叫网虫

最新推荐文章于 2024-07-31 10:53:27 发布

阅读量2.8k

点赞数 2

分类专栏： plugin 文章标签： html css 前端前端框架 javascript

本文链接：https://blog.csdn.net/qq_42961150/article/details/120204300

版权

plugin 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

Intro.js的官方文档：https://introjs.com/docs/getting-started/install
利用Intro.js实现一个简单的新手引导
效果：

实现步骤

1. 打开官网可以看到intall中有介绍。可以在桌面打开cmd使用npm install intro.js --save 命令下载相关的插件代码，然后在node_modules文件夹找到intro.js、introjs.css放到自己的项目文件夹中。

2. 引入项目中

例如：
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./plugin/introjs.css" />
	</head>
	<body>
		<div class="v" style="width: 100px;">我是内容1</div>
		<div class="v" style="width: 100px;">我是内容2</div>
		<div class="v" style="width: 100px;">我是内容3</div>
		<script type="text/javascript" src="./plugin/intro.js"></script>
		<script type="text/javascript">
		    //introJs().start();
		</script>
	</body>
</html>

3. 快速开始

基本属性 data-intro和data-step

安装了Introjs之后，在HTML元素中添加data-intro和data-step
data-step不设置，则默认从第一个开始，可选
data-intro该步骤的描述，必填

例如：
<div class="v" data-step="1" data-intro="第1步，你好！" style="width: 100px;">我是内容1</div>
<div class="v" data-step="2" data-intro="第2步，你好！" style="width: 100px;">我是内容2</div>
<script type="text/javascript">
    introJs().start();
</script>

指定范围

指定v2范围内的代码才有引导，将一个class名参数传递给introJs

<div class="v2">
    <div class="v" data-step="1" data-intro="第1步，你好！" style="width:     100px;">我是内容1</div>
    <div class="v" data-step="2" data-intro="第2步，你好！" style="width:     100px;">我是内容2</div>
</div>
<div class="v" data-step="3" data-intro="第3步，你好！" style="width: 100px;">我是内容3</div>
<script type="text/javascript">
    introJs('.v2').start();
</script>

添加提示

要添加提示，在元素上使用数据提示属性data-hint

<div class="v" data-step="1" data-intro="第1步，你好！" data-hint='Hello step one!' style="width: 100px;">我是内容1</div>
<script type="text/javascript">
    introJs().addHints();
</script>