乐趣区

关于javascript:Driverjs-开源无依赖的-web-新手交互引导工具库功能强大高度可定制

能够疾速实现老手疏导成果,自带动画,体验优良,而且还能高度定制。

对于 Driver.js

Driver.js 是一个能够轻松实现老手指引交互的 javascript 工具库,次要的作用是为刚接触利用的老手用户疾速理解产品,帮忙用户把注意力聚焦到某项性能,从而疾速相熟咱们的开发的产品,截止发文 star 曾经高达 13.5k!

Driver.js 的技术个性

  • 简略轻量:应用很简略,独立无依赖,只有 4kb 大小
  • 高度可定制:具备丰盛弱小的 API,按需应用
  • 交互体验好:反对动画过渡,体验晦涩难受
  • 突出显示任何内容:反对突出显示页面上的任何 dom 元素
  • 简略几步实现性能介绍:为咱们 Web 利用创立很棒的性能介绍,体验优良
  • 对用户操作敌对:能够通过键盘管制疏导流程,在生成力利用上很实用
  • 浏览器兼容性体现统一:反对简直所有浏览器(包含驰名的 IE)

开发上手应用和倡议

无论是开发 APP 还是 web 利用,老手疏导都是一个很常见的需要,个别在这 2 个方面须要老手疏导:

最近开发的需要中,就是因为改版变动较大,须要做批示疏导。交互体验好的老手疏导性能,蕴含动效、遮罩和元素定位等,开发起来费时费力,而明天介绍的 Driver.js 就是我破费了不少工夫找到的一款很好用的老手疏导工具库,性能很弱小,最重要的是可能高度定制,像我这种谋求 100% 还原设计稿的前端仔,能用代码够得心应手地定制干起活来才香。

Driver.js 反对通过 npm 或 yarn 来装置,比方:

也能够在线或本地间接引入,须要留神要同时引入 CSS 文件:

最简略的应用办法是高亮突出一个元素,只有给一个 CSS 选择器即可:

调整弹出框的地位:

下面这些都是小打小闹,老手疏导交互里最罕用的就是蕴含多个步骤的疏导,用户能够一步一步地理解性能,实现这样的成果也很简略:

真的很酷,应用起来也是真的很简略,CSS 咱们还能够通过编写本人的 CSS 款式来定制遮罩的款式,这样就能齐全匹配咱们的利用格调。官网的文档里还有更多弱小的性能个性,感兴趣的开发者能够去细细浏览。

收费开源阐明

Driver.js 是一个收费的 javascript 工具库,作者是 Kamran,源码基于 MIT 开源协定托管在 Github 上,任何集体和公司都能够收费下载应用,也能够用在商业我的项目上。

相干网址:https://www.thosefree.com/dri…

退出移动版