实操:driver.js 实现产品导览、亮点、上下文帮助

news/2024/4/25 18:23:53

官网

https://driverjs.com/

依赖

<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"/>

配置

注意:获取实例是:``window.driver.js.driver`

    <script>const driver = window.driver.js.driver;function helpMe() {const driverObj = driver({// 开启动画animate: true,// 开启进度showProgress: true,showButtons: ['next', 'previous', 'close'],prevBtnText: '上一步',nextBtnText: '下一步',doneBtnText: '结束引导',popoverClass: 'driverjs-theme',allowClose: true,// 是否自动滚动以使高亮元素可见scrollIntoViewOptions: {behavior: 'smooth',block: 'center'},steps: [{element: '#index',popover: {title: '这是首页',}},{element: '#torental',popover: {title: '租车点这里',description: '你可以xxxxxxxxxxx'}},{element: '#steps',popover: {title: '租车流程看这里',description: '你可以xxxxxxxxxxx'}}]});driverObj.drive();}</script>

效果

GIF 2024-4-3 18-49-24

其他用法

也可以使用它来显示一个简单的模态,而不突出显示任何元素。

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>",}
})

GIF 2024-4-3 18-45-51

附录

案例完整code

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sa="http://www.thymeleaf.org/extras/sa-token"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>汽车租赁系统</title><!-- Bootstrap CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"><link href="/css/my.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" /><style>/* Custom Styles */body {padding-top: 70px;padding-bottom: 50px;background-color: #f8f9fa;/* 设置页面背景色 */color: #343a40;/* 设置文本颜色 */}.footer {position: fixed;bottom: 0;width: 100%;}.hero {background-color: #007bff;/* 设置hero区域背景色 */color: #fff;/* 设置hero区域文本颜色 */}.about {background-color: #f8f9fa;/* 设置about区域背景色 */}.renting-process {background-color: #fff;/* 设置租车流程区域背景色 */}.renting-process .card {border: none;/* 移除卡片边框 */background-color: #f8f9fa;/* 设置卡片背景色 */}.renting-process .card-title {color: #007bff;/* 设置卡片标题颜色 */}</style>
</head><body><!-- Navigation Bar --><nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" th:fragment="navbar"><div class="container"><a class="navbar-brand" href="/">租车行者</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse"data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav ms-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link" href="/" id="index">首页</a></li><li class="nav-item"><a class="nav-link" href="/car/list" id="torental">车辆租赁</a></li><li class="nav-item"><a class="nav-link" href="/like/carList">我的收藏</a></li><li class="nav-item"><a class="btn btn-outline-primary" href="/login" sa:notLogin>注册/登录</a></li><li class="nav-item"><a class="btn btn-outline-success"  onclick="helpMe()">帮助引导</a></li><li class="nav-item" sa:login><a class="nav-link" href="#"><img th:src="${stp.getSession().get('avatar')}" alt="User Avatar" width="32" height="32"class="rounded-circle me-2" style="border: 2px solid #ccc;"><span id="username" th:text="${stp.getSession().get('username')}">用户名</span></a></li><li class="nav-item" sa:login><a class="btn btn-outline-danger" href="/logout">退出</a></li></ul></div></div></nav><!-- Hero Section --><section class="hero"><div class="container text-center"><h1 class="display-4">欢迎来到租车行者</h1><p class="lead">为您提供方便、快捷的汽车租赁服务</p><a href="/car/list" class="btn btn-outline-light btn-lg mb-2">立即租车</a></div></section><!-- About Section --><section class="about mt-5"><div class="container text-center"><h2 class="mb-4">关于我们</h2><p class="lead">我们是一家致力于为客户提供高品质汽车租赁服务的公司。无论您是在旅途中还是需要暂时用车,我们都能满足您的需求。</p><a href="#" class="btn btn-outline-primary">了解更多</a></div></section><!-- Renting Process Section --><section class="renting-process" style="margin-top:10%"><div class="container" id="steps"><h2 class="text-center mb-4">如何租车?</h2><div class="row justify-content-center"><!-- Renting Process Cards --><div class="col-md-4 mb-4"><div class="card"><div class="card-body"><h5 class="card-title">1.选择车辆</h5><p class="card-text">在车辆库中选择您喜欢的车辆。</p></div></div></div><div class="col-md-4 mb-4"><div class="card"><div class="card-body"><h5 class="card-title">2.提交租车申请</h5><p class="card-text">填写租车申请表格并提交。</p></div></div></div><div class="col-md-4 mb-4"><div class="card"><div class="card-body"><h5 class="card-title">3.确认订单</h5><p class="card-text">等待我们确认订单并进行付款。</p></div></div></div></div></div></section><!-- Footer --><footer class="footer bg-light text-center"><div class="container"><span class="text-muted">&copy; 2024 汽车租赁系统</span></div></footer><!-- Bootstrap Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script><script>const driver = window.driver.js.driver;function helpMe() {const driverObj = driver({animate: true,showProgress: true,showButtons: ['next', 'previous', 'close'],prevBtnText: '上一步',nextBtnText: '下一步',doneBtnText: '结束引导',popoverClass: 'driverjs-theme',allowClose: true,// 是否自动滚动以使高亮元素可见scrollIntoViewOptions: {behavior: 'smooth',block: 'center'},steps: [{element: '#index',popover: {title: '这是首页',}},{element: '#torental',popover: {title: '租车点这里',description: '你可以xxxxxxxxxxx'}},{element: '#steps',popover: {title: '租车流程看这里',description: '你可以xxxxxxxxxxx'}}]});driverObj.drive();}</script>
</body></html>

https://www.xjx100.cn/news/3366556.html

相关文章

PCB设计中的EMC技术

除了元器件的选择和电路设计之外&#xff0c;良好的印制电路板&#xff08;PCB&#xff09;设计在电磁兼容性中也是一个非常重要的因素。PCB EMC设计的关键&#xff0c;是尽可能减小回流面积&#xff0c;让回流路径按照设计的方向流动。最常见返回电流问题来自于参考平面的裂缝…

二叉树的遍历——洛谷P1364

1. 如何构建父节点与子节点的关系 通过一个结构体&#xff0c;包括每一个节点的父、子节点&#xff0c;在读入一个节点的数据时&#xff0c;标记其子节点的父节点为自己 2. 代码 #include<bits/stdc.h> using namespace std;struct node {int f,l,r,w; }tr[105];int n,s,…

mysql-FIND_IN_SET包含查询

如图所示&#xff0c;需要查询字段ancestorid中包含14的所有数据&#xff0c;使用FIND_IN_SET即可实现&#xff0c;不需要使用模糊查找like 示例sql&#xff1a; SELECT * FROM mt_fire_template WHERE FIND_IN_SET(14,ancestorid) 结果

[蓝桥杯 2016 省 B] 交换瓶子

题目链接 [蓝桥杯 2016 省 B] 交换瓶子 题目描述 有 N N N 个瓶子&#xff0c;编号 1 ∼ N 1∼N 1∼N&#xff0c;放在架子上。 比如有 5 5 5 个瓶子&#xff1a; 2,1,3,5,4要求每次拿起 2 2 2 个瓶子&#xff0c;交换它们的位置。 经过若干次后&#xff0c;使得瓶子的…

前后端开发之——文章分类管理

原文地址&#xff1a;前后端开发之——文章分类管理 - Pleasure的博客 下面是正文内容&#xff1a; 前言 上回书说到 文章管理系统之添加文章分类。就是通过点击“新建文章分类”按钮从而在服务端数据库中增加一个文章分类。 对于文章分类这个对象&#xff0c;增删改查属于配…

人工智能(pytorch)搭建模型25-基于pytorch搭建FPN特征金字塔网络的应用场景,模型结构介绍

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能(pytorch)搭建模型25-基于pytorch搭建FPN特征金字塔网络的应用场景&#xff0c;模型结构介绍。特征金字塔网络&#xff08;FPN&#xff09;是一种深度学习模型结构&#xff0c;主要应用于目标检测任务中&am…

springboot基本使用八(mbatisplus+filter实现登录功能)

mybatisplus依赖&#xff1a; <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.2</version> </dependency> mysql依赖&#xff1a; <dependency><grou…

147.【2024Java八股-全网最全-10w字】

100道Java经典面试题 (一)、准备篇1.HR如何筛选简历?2.部门负责人如何筛选简历?3.简历模块布局4.应届生如何找到合适的练手项目?5.深入学习哪些业务模块呢?6.Java程序员的面试过程 (二)、Redis篇1.redis经常使用在哪些场景?2.Redis进行查询的流程是什么?3.什么是缓存穿透…