Smartour,让网页导览变得更简单

开发 前端
在遇到网页内容有着较大调整的时候,往往需要一个导览功能去告诉用户,某某功能已经调整到另外一个位置。比较常规的办法是添加一个蒙层,高亮显示被调整的区域,然后通过文字介绍去完成引导。我们把这个功能称为“导览”,而 Smartour 则把这个导览的功能抽离出来,提供了一个开箱即用的解决方案。

 

项目地址:https://github.com/jrainlau/s...
官方示例:https://jrainlau.github.io/sm...

Install

Smartour 被构建成了 umd 和 es module 模块,允许用户通过不同的方式引入。 

  1. npm install smartour  
  1. /* ES Modules */ 
  2. import Smartour from 'smartour/dist/index.esm.js' 
  3. /* CommandJS */ 
  4. const Smartour = require('smartour'
  5. /* <script> */ 
  6. <script src="smartour/dist/index.js"></script> 

基本用法

Smartour 提供了一个非常简单的 API focus(), 这是高亮一个元素最简单的方式。

  1. let tour = new Smartour() 
  2.  
  3. tour.focus({ 
  4.   el: '#basic-usage' 
  5. }) 

插槽 Slot

插槽 slot 是用于为高亮元素提供描述的 html 字符串。

纯字符串:

  1. let tour = new Smartour() 
  2.  
  3. tour.focus({ 
  4.   el: '#pure-string'
  5.   slot: 'This is a pure string' 
  6. }) 

Html 字符串

  1. let tour = new Smartour() 
  2.  
  3. tour.focus({ 
  4.   el: '#html-string'
  5.   slot: ` 
  6.     <div> 
  7.       <p>This is a html string</p> 
  8.     </div> 
  9.   ` 
  10. }) 

插槽位置

插槽的位置可以选择4个不同的方向: toprightleftbottom.

设置 options.slotPosition 属性即可覆盖默认的 top 位置。

  1. let tour = new Smartour() 
  2.  
  3. tour.focus({ 
  4.   el: '#slot-positions'
  5.   slot: `top`, 
  6.   options: { 
  7.     slotPosition: 'top' // 默认为 `top
  8.   } 
  9. }) 

插槽事件

插槽所定义的元素也可以绑定事件。我们通过 keyNodes 属性来为插槽元素绑定事件。

keyNodes 是内容为一系列 keyNode 的数组。 属性 keyNode.el 是一个 css 选择器,而 keyNode.event 属性则是对应元素所绑定的事件。

  1. let tour = new Smartour() 
  2.  
  3. tour.focus({ 
  4.   el: '.slot-events-demo'
  5.   options: { 
  6.     slotPosition: 'right' 
  7.   }, 
  8.   slot: ` 
  9.  
  10.       Click here to occur an alert event 
  11.     </button> 
  12.  
  13.       Click here to occur an alert event 
  14.     </button> 
  15.   `, 
  16.   keyNodes: [{ 
  17.     el: '.occur-1'
  18.     event: () => { alert('Event!!') } 
  19.   }, { 
  20.     el: '.occur-2'
  21.     event: () => { alert('Another event!!') } 
  22.   }] 
  23. }) 

Queue

有的时候页面需要不止一个导览。Smartour 允许你把一系列的导览通过 .queue() 放在一起,然后挨个挨个地展示它们。

举个例子:

  1. let tour = new Smartour() 
  2.  
  3. tour 
  4.   .queue([{ 
  5.     el: '.li-1'
  6.     options: { 
  7.       layerEvent: tour.next.bind(tour) 
  8.     }, 
  9.     slot: 'This is the 1st line.' 
  10.   }, { 
  11.     el: '.li-2'
  12.     options: { 
  13.       layerEvent: tour.next.bind(tour) 
  14.     }, 
  15.     slot: 'This is the 2nd line.' 
  16.   }, { 
  17.     el: '.li-3'
  18.     options: { 
  19.       layerEvent: tour.next.bind(tour) 
  20.     }, 
  21.     slot: 'This is the 3rd line.' 
  22.   }]) 

选项

Smartour 是一个构建函数,它接收一个 options 参数去覆盖其默认选项。

让我们看看它的默认选项是什么样子的:

  1.   prefix: 'smartour', // class 前缀 
  2.   padding: 5, // 高亮区域内边距 
  3.   maskColor: 'rgba(0, 0, 0, .5)', // 带透明值的遮罩层颜色 
  4.   animate: true, // 是否使用动画 
  5.   slotPosition: 'top' // 默认的插槽位置 
  6.   layerEvent: smartour.over // 遮罩层点击事件,默认为结束导览 

APIs

除了 .focus().queue() 和 .run() API 以外,Smartour 还提供了另外三个 API 专门用于控制导览的展示。

  • .next():展示下一个导览(只能配合 .queue() 使用)。
  • .prev():展示上一个导览(只能配合 .queue() 使用)。
  • .over():结束全部导览。

Smartour 的原理

Smartour 通过 element.getBoundingClientRect() api 来获取目标元素的宽高和位置信息,然后放置一个带着 box-shadow 样式的元素在其之上作为高亮区域。

由于点击事件无法再 box-shadow 的区域里触发,所以 Smartour 还放置了一个全屏透明的遮罩层用于绑定 layerEvent 事件。

高亮区域和插槽都被设置为 absolute。当页面滚动时,document.documentElement.scrollTop 或者 document.documentElement.scrollLeft 的值就会变化,然后 Smartour 会实时修正它的位置信息。 

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2009-06-18 15:51:52

SSL VPN负载均衡Array

2020-06-16 13:22:22

AI创新深度学习

2013-07-31 14:19:06

Windows 8.1

2019-01-18 13:13:40

Facebook 开发开源

2009-07-06 14:23:00

SSL VPNArray netwo

2009-06-19 10:16:10

巅峰访谈

2019-06-26 15:41:26

AI云原生云迁移

2021-03-15 10:29:50

人工智能

2009-08-19 19:16:21

CS1000统一通信北电

2016-09-08 23:58:42

云运维 云数据中心

2019-12-19 18:40:16

5G智慧城市智能教育

2011-11-09 11:13:55

Firefox 8

2023-12-01 16:00:48

Python结构化模式

2020-07-24 15:40:51

CSS前端代码

2011-09-15 10:35:12

Android应用IOS应用着装搭配

2014-08-01 09:50:39

Oracle营销云Oracle Eloq

2023-03-24 16:14:01

物联网医疗保健

2020-08-13 10:11:14

物联网安全智能家居物联网

2023-03-15 16:02:27

2018-10-16 09:04:31

网络视频监控服务器
点赞
收藏

51CTO技术栈公众号