欢迎光临散文网 会员登陆 & 注册

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

2023-09-17 10:03 作者:尘缘如梦_  | 我要投稿

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

1 简介

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 方法开启页面引导

让我们来看下效果:

1.gif

2 简单体验

接下来我们自己上手体验下,先来看下最终实现的效果。

2.gif

 <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://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5efaea22e8794a31afe9f238109e6a90~tplv-k3u1fbpfcp-watermark.image?" />
   <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 完成引导步骤编写即可。

3 主题定制

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: [
     // ..
   ]
 })

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

最后看下效果:

3.gif

4 小结

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

最后 driver.js 支持很多配置能力,更多可以到官网查看示例。


推荐一个页面引导库 driver.js的评论 (共 条)

分享到微博请遵守国家法律