推荐一个页面引导库 driver.js

news/2024/2/29 16:10:48/文章来源:https://blog.csdn.net/weixin_50367873/article/details/135642388

页面引导功能是 web 开发中常见的一个功能。通过页面引导功能,你可以让用户第一时间熟悉你的页面功能。今天给大家推荐一个页面引导库 driver.js。

简介

driver.js 是一款用原生 js 实现的页面引导库,上手非常简单,体积在 gzip 压缩下仅仅 5kb。

我们来看下如何使用 driver.js

import { driver } from "driver.js";
import "driver.js/dist/driver.css";const driverObj = driver({showProgress: true,steps: [{ element: '.page-header', popover: { title: 'Title', description: 'Description' } },{ element: '.top-nav', popover: { title: 'Title', description: 'Description' } },{ element: '.sidebar', popover: { title: 'Title', description: 'Description' } },{ element: '.footer', popover: { title: 'Title', description: 'Description' } },]
});driverObj.drive()

可以看到仅仅十几行代码,你就可以完成页面引导功能的编写。

  1. 首先引入 driver.js 库及其 css 文件
  2. 然后调用 driver 函数构造一个 driverObj 对象,通过 steps 参数编写你的引导步骤,element 为需要高亮的 DOM 元素或 DOM 对应的 CSS 选择器
  3. 最后调用 driverObj 的 drive 方法开启页面引导

让我们来看下效果:
请添加图片描述

简单体验

接下来我们自己上手体验下,先来看下最终实现的效果。
请添加图片描述

<p>I LOVE YOU TOO》。漫画作者 CHOW HON LAM,马来西亚漫画家、插画家。</p>
<div><button id="story1">故事1</button>
</div>
<div id="tour1" class="tour"><img width="500" height="auto" src="https://wzy-picture.oss-cn-beijing.aliyuncs.com/images/p118850804-3.jpg" /><div class="crocodile1"></div><div class="koala1"></div>
</div>

html 内容包括一个开始按钮和漫画区域内容。

#tour1 {position: relative;display: none;margin-top: 32px;
}.crocodile1 {position: absolute;left: 245px;top: 35px;width: 140px;height: 130px;
}.koala1 {position: absolute;left: 145px;top: 130px;width: 100px;height: 30px;
}

样式这块主要是将要高亮的区域定位出来。

const driver = window.driver.js.driver;$('#story1').click(() => {$('#tour1').css('display', 'inline-block')const driverObj = driver({showProgress: true,allowClose: false,steps: [{ element: '.crocodile1', popover: { description: '这里有一只鳄鱼', side: "left", align: 'start' } },{ element: '.koala1', popover: { description: '这里有三只考拉', side: "bottom", align: 'start' } },{ element: '#tour1', popover: { description: '这是他们的故事《另一把雨伞》', side: "bottom", align: 'start' } }]});driverObj.drive()
})

最后使用 driver.js 完成引导步骤编写即可。

主题定制

driver.js 支持主题定制功能,你可以修改企气泡卡片的样式。

主题定制有支持两种方式

  • 初始化时传入 popoverClass,基于这个类名调整气泡卡片的样式
const driverObj = driver({popoverClass: 'my-custom-popover-class'
})// 气泡卡片各个元素的 class
.driver-popover {}
.driver-popover-arrow {}
.driver-popover-title {}
.driver-popover-description {}
.driver-popover-close-btn {}
.driver-popover-footer {}
.driver-popover-progress-text {}
.driver-popover-prev-btn {}
.driver-popover-next-btn {}
  • 直接修改气泡弹窗的 DOM 元素,在 onPopoverRender 这个钩子中进行操作
const driverObj = driver({onPopoverRender: (popover, { config, state }) => {const firstButton = document.createElement("button");firstButton.innerText = "Go to First";popover.footerButtons.appendChild(firstButton);firstButton.addEventListener("click", () => {driverObj.drive(0);});},steps: [// ..]
})

上述代码在底部按钮区域加了个“返回第一页”的按钮。

最后看下效果:
请添加图片描述

小结

driver.js 简单易上手,同时支持所有主流浏览器,也支持移动端展示。driver.js 除了可以作为页面引导使用,还可以简单对一个元素进行高亮,突出你想展示的内容。

driver.js 除了上述的示例外,还支持很多配置能力,更多可以到官网查看示例。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_925859.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MongoDB面试系列-01

1. MongoDB 是什么&#xff1f; MongoDB是由C语言编写的&#xff0c;是一个基于分布式文件存储的开源数据库系统。再高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能。MongoDB旨在给Web应用提供可扩展的高性能数据存储解决方案。 MongoDB将数据存储…

Shopify绑定Facebook收费吗?付款方式是什么?-站斧浏览器

Shopify绑定Facebook收费吗&#xff1f; 答案是&#xff1a;Shopify绑定Facebook并不收取额外费用。Shopify和Facebook之间的绑定是免费的&#xff0c;卖家可以充分利用这一功能来扩展他们的在线业务。通过将商店与Facebook Page相连接&#xff0c;卖家可以将产品目录同步到Fa…

LeetCode 41 缺失的第一个正数

题目描述 缺失的第一个正数 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,0] 输出&#xff1a;3示例 2&#xff…

rabbitmq-java基础详解

一、rabbitmq是什么&#xff1f; 1、MQ定义 MQ&#xff08;Message Queue&#xff09;消息队列 主要解决&#xff1a;异步处理、应用解耦、流量削峰等问题&#xff0c;是分布式系统的重要组件&#xff0c;从而实现高性能&#xff0c;高可用&#xff0c;可伸缩和最终一致性的架…

NLP技术在搜索推荐场景中的应用

NLP技术在搜索推荐中的应用非常广泛&#xff0c;例如在搜索广告的CTR预估模型中&#xff0c;NLP技术可以从语义角度提取一些对CTR预测有效的信息&#xff1b;在搜索场景中&#xff0c;也经常需要使用NLP技术确定展现的物料与搜索query的相关性&#xff0c;过滤掉相关性较差的物…

CASAIM与LG化学越南工厂达成全自动化智能测量技术合作,助力汽车锂电池相关零部件全自动化测量及质量管控

近日&#xff0c;CASAIM与LG化学越南工厂达成全自动化智能测量技术合作&#xff0c;CASAIM将为LG化学越南工厂提供最新一代的CASAIM-IS全自动化测量系统解决方案&#xff0c;助力LG化学越南工厂实现汽车锂电池相关零部件的高精度、高效率测量和检测&#xff0c;进一步提升产品质…

【Vue】后端返回文件流,前端预览文件

let date;request({url: this.$route.query.url,method: get,responseType: blob,}).then(resp > {date respthis.path window.URL.createObjectURL(new Blob([resp], {type: "application/pdf"}))}).catch((e) > {//旧版本浏览器下的blob创建对象window.Blo…

Langchain 与 Elasticsearch:创新数据检索的融合实战

1、简介 在信息爆炸的时代&#xff0c;有效地检索和处理数据变得至关重要。Langchain 和 Elasticsearch 的结合&#xff0c;为我们提供了一个强大的工具&#xff0c;以更智能的方式进行数据检索和分析。 作为一名拥有多年 Elasticsearch 实战经验的技术博主&#xff0c;我将在本…

注意:温度太高电路板表面会氧化导致不上锡

不上锡的情况为什么大多发生在热天&#xff1f; 因为天气太热&#xff0c;室内和室外温差太大&#xff0c;如把PCB板从30多度的室外转移到温度更低的室内就会导致PCB板表面“流汗”现象&#xff0c;PCB板表面有水份就会让其氧化PCB板拆封后&#xff0c;SMT工厂内部环境不好或温…

DC电源模块在新能源领域的应用前景

BOSHIDA DC电源模块在新能源领域的应用前景 DC电源模块在新能源领域有着广阔的应用前景。随着可再生能源技术的发展和普及&#xff0c;如太阳能和风能等的应用逐渐增多&#xff0c;DC电源模块在这些领域的应用越来越重要。 首先&#xff0c;DC电源模块可以用于太阳能发电系统…

记一次 .NET某收银软件 非托管泄露分析

一&#xff1a;背景 1. 讲故事 在我的分析之旅中&#xff0c;遇到过很多程序的故障和杀毒软件扯上了关系&#xff0c;有杀毒软件导致的程序卡死&#xff0c;有杀毒软件导致的程序崩溃&#xff0c;这一篇又出现了一个杀毒软件导致的程序非托管内存泄露&#xff0c;真的是分析多…

mac 上 ssh: connect to host localhost port 22: Connection refused

1。 问题 在搭建hadoop环境的时候 发现ssh localhost 在报错 2. 解决 打开系统设置 -> 共享 -> -> 在左边服务中选择 远程登录 注意红框这些选项慎重选择&#xff01;&#xff01;&#xff01; 修改后&#xff0c;在终端再次 ssh localhost 发现登录成功了 如果…

SpringBoot Redis入门(四)——Redis单机、哨兵、集群模式

单机模式&#xff1a;单台缓存服务器&#xff0c;开发、测试环境下使用&#xff1b;哨兵模式&#xff1a;主-从模式&#xff0c;提高缓存服务器的高可用和安全性。所有缓存的数据在每个节点上都一致。每个节点添加监听器&#xff0c;不断监听节点可用状态&#xff0c;一旦主节点…

Vue3 + Vite + Css3切换主题

1、css3中变量的作用 一个系统或者说一个项目中&#xff0c;往往涉及到很多颜色&#xff0c;但是如果系统看起来样式规整统一的话可能在色值方面偏靠一个色系&#xff0c;字体&#xff0c;颜色&#xff0c;背景颜色&#xff0c;图标颜色等等。 所有可以在css中定义统一的变量&…

智能时代,让AI为你撰写专业应用文

大家好我是在看&#xff0c;记录普通人学习探索AI之路。 何谓应用文&#xff1f;简单来说&#xff0c;应用文是指在日常生活中以及工作中撰写的&#xff0c;旨在传递信息、处理事务的一种文体类型。其范畴广泛&#xff0c;涵盖了诸如请假条、通知书、辞职信、检查报告、欠条、…

6.1810: Operating System Engineering 2023 <Lab7 lock: Parallelism/locking>

一、本节任务 二、要点 2.1 文件系统&#xff08;file system&#xff09; xv6 文件系统软件层次如下&#xff1a; 通过路径树我们可以找到相应的文件&#xff1a; fd&#xff08;文件描述符&#xff09;是进程用来标识其打开的文件的手段&#xff0c;每个进程有自己的文件…

SaaS模式、springboot框架医院云HIS系统源码

HIS系统作为医院信息化的核心业务系统&#xff0c;如今已成为各个医疗机构的必备品了。大到三级二级医院&#xff0c;小到社区卫生服务中心&#xff0c;门诊&#xff08;门诊管理系统也可以理解为门诊的his系统&#xff0c;只是功能简单&#xff0c;模块较少&#xff09;。随着…

010:vue结合el-table实现表格小计总计需求(summary-method)

文章目录 1. 实现效果2. 核心部分3. 完整组件代码4. 注意点 1. 实现效果 2. 核心部分 el-table 添加如下配置&#xff0c;添加 show-summary 属性&#xff0c;配置 summary-method 函数 <el-table.......show-summary:summary-method"getSummaries" >...... …

Gartner发布CPS安全2024年预测:安全形势动荡的四大向量

随着威胁形势、自动化和人工智能采用的步伐以及供应商形势不断快速发展&#xff0c;我们为安全和风险管理领导者提供了四项预测&#xff0c;以规划 2024 年及以后 CPS 安全的未来发展方向。 主要发现 随着人工智能的采用加速增加网络物理系统&#xff08; CPS&#xff09;的“智…

【Internet Protocol】ip介绍,如何组局域网实现远程桌面和文件共享

文章目录 1.何为“上网”1.1 定义1.2 为什么连了WiFi就能上网了&#xff1f; 2.ip2.1 什么是ip2.2 为什么区分广域网和局域网&#xff0c;ip的唯一性2.3 如何查看设备的ip2.4 什么叫"ping"2.5 区分是否两个ip是否在同一局域网2.5.1 最稳妥的方式&#xff1a;ip&m…