Astro driver.js
入门介绍
安装 基本用法 配置 API 参考 定制主题 迁移到 1.x
示例
动态导览 静态导览 自定义弹出框 显示进度 异步导览 退出确认 禁止关闭 定制彩色遮罩层 弹出框位置 弹出框按钮 简单高亮

简单高亮

产品导览并不是Driver.js的唯一用例。您可以使用它来高亮页面上的任何元素，并显示带有描述的弹出框。这对于为用户提供上下文帮助非常有用，例如帮助用户填写表单或解释一个特性。

下面的示例展示了如何高亮一个元素并简单地显示一个弹出框。

const driverObj = driver({
      popoverClass: "driverjs-theme",
      stagePadding: 4,
    });
    
    driverObj.highlight({
      element: "#highlight-me",
      popover: {
        side: "bottom",
        title: "This is a title",
        description: "This is a description",
      }
    })

您还可以使用它来显示一个简单的模态框，而不需要高亮任何元素。

const driverObj = driver();
    
    driverObj.highlight({
      popover: {
        description: "<img src='https://i.imgur.com/EAQhHu5.gif' style='height: 202.5px; width: 270px;' /><span style='font-size: 15px; display: block; margin-top: 10px; text-align: center;'>Yet another highlight example.</span>",
      }
    })

请专注于下面的输入框，看看弹出框是如何显示的。

const driverObj = driver({
      popoverClass: "driverjs-theme",
      stagePadding: 0,
      onDestroyed: () => {
        document?.activeElement?.blur();
      }
    });
    
    const nameEl = document.getElementById("name");
    const educationEl = document.getElementById("education");
    const ageEl = document.getElementById("age");
    const addressEl = document.getElementById("address");
    const formEl = document.querySelector("form");
    
    nameEl.addEventListener("focus", () => {
      driverObj.highlight({
        element: nameEl,
        popover: {
          title: "Name",
          description: "Enter your name here",
        },
      });
    });
    
    educationEl.addEventListener("focus", () => {
      driverObj.highlight({
        element: educationEl,
        popover: {
          title: "Education",
          description: "Enter your education here",
        },
      });
    });
    
    ageEl.addEventListener("focus", () => {
      driverObj.highlight({
        element: ageEl,
        popover: {
          title: "Age",
          description: "Enter your age here",
        },
      });
    });
    
    addressEl.addEventListener("focus", () => {
      driverObj.highlight({
        element: addressEl,
        popover: {
          title: "Address",
          description: "Enter your address here",
        },
      });
    });
    
    formEl.addEventListener("blur", () => {
      driverObj.destroy();
    });