intro.js 页面引导简单用法分享

Intro.js 页面引导简单用法

简介

Intro.js 是一个轻量级的网页引导库，可以用来为用户展示页面功能、元素位置、操作流程等，能够帮助用户更好地理解网站的使用方法，提高用户的满意度。

安装

可以通过 npm 或 yarn 安装 intro.js：

npm install intro.js --save

# 或者

yarn add intro.js

也可以直接在 html 页面中使用 cdn：

<link href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>

基本用法

Intro.js 有两种使用方法：声明式和函数式。

声明式

在 HTML 中，可以使用 data-intro 属性来注明需要引导的元素，使用 data-step 属性来指定引导的顺序。

<div data-intro="欢迎使用" data-step="1">
  <h1>标题</h1>
  <p>内容</p>
</div>

<button data-intro="点击我" data-step="2">点击</button>

在 JavaScript 中，可以使用 introJs().start() 函数来启动引导：

introJs().start();

函数式

在 JavaScript 中，可以使用函数式来实现更加灵活的引导效果。例如，可以在引导结束后执行特定的函数：

introJs().oncomplete(function() {
  alert('引导结束！');
}).start();

示例说明

下面通过两个示例来进一步说明 Intro.js 的使用方法。

示例一：引导页面上的元素

在这个示例中，我们将通过 Intro.js 来引导页面中的两个元素：按钮和列表。

首先，创建以下 html 结构：

<!DOCTYPE html>
<html>
<head>
  <title>Intro.js 示例</title>
  <link href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css" rel="stylesheet">
</head>
<body>
  <h1>Intro.js 示例</h1>
  <button id="button" class="button">点击我</button>
  <ul>
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
  </ul>
  <script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>
  <script>
    introJs().setOptions({
      steps: [
        {
          element: '#button',
          intro: '这是一个按钮！'
        },
        {
          element: 'ul',
          intro: '这是一个列表！'
        }
      ]
    }).start();
  </script>
</body>
</html>

在 JavaScript 中，通过 setOptions() 函数来设置引导的选项，然后通过 start() 函数来启动引导。在选项中，element 属性指定需要引导的元素，intro 属性指定引导的描述。

打开页面，可以看到 Intro.js 引导的效果。

示例二：自定义引导效果

在这个示例中，我们将使用多步引导来介绍 Intro.js 的更多特性。

首先，创建以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Intro.js 示例</title>
  <link href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css" rel="stylesheet">
</head>
<body>
  <h1>Intro.js 示例</h1>
  <button id="button" class="button">点击我</button>
  <ul>
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
  </ul>
  <script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>
  <script>
    let steps = [
      {
        element: '#button',
        intro: '这是一个自定义的引导效果！'
      },
      {
        element: 'ul',
        intro: '接下来，请选择一个选项',
        position: 'right'
      },
      {
        element: 'ul li:first-child',
        intro: '这是第一个选项！',
        position: 'right'
      },
      {
        element: 'ul li:last-child',
        intro: '这是最后一个选项！',
        position: 'right'
      }
    ];

    let intro = introJs();
    intro.setOptions({
      steps,
      showStepNumbers: false,
      showBullets: false,
      exitOnOverlayClick: false,
      keyboardNavigation: true,
      overlayOpacity: 0.8,
      disableInteraction: false,
      scrollToElement: true,
      scrollTo: 'element',
      positionPrecedence: ['left', 'right', 'bottom', 'top'],
      tooltipClass: 'custom-tooltip'
    });
    intro.start();
  </script>
</body>
</html>

在这个示例中，我们通过 position 属性来指定引导提示的位置，通过一些其他的选项来调整引导的样式和功能。

打开页面，可以看到自定义的 Intro.js 引导效果。