|
|
51CTO旗下网站
|
|
移动端

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

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

作者:jrainlau来源:segmentfault|2019-07-10 10:20

 

项目地址: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 会实时修正它的位置信息。

【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

49人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

630人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

无懈可击的Web设计

一个网站,无论视觉上多美观或者内容多丰富,如果它不能适应各种浏览情况并能面向尽可能广泛的用户群,那它就不算是真正成功的网站。本书提...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客