本文介紹了Smartour 讓網(wǎng)頁導(dǎo)覽變得更簡單，分享給大家，具體如下：

在遇到網(wǎng)頁內(nèi)容有著較大調(diào)整的時(shí)候，往往需要一個(gè)導(dǎo)覽功能去告訴用戶，某某功能已經(jīng)調(diào)整到另外一個(gè)位置。比較常規(guī)的辦法是添加一個(gè)蒙層，高亮顯示被調(diào)整的區(qū)域，然后通過文字介紹去完成引導(dǎo)。我們把這個(gè)功能稱為“導(dǎo)覽”，而 Smartour 則把這個(gè)導(dǎo)覽的功能抽離出來，提供了一個(gè)開箱即用的解決方案。

項(xiàng)目地址：https://github.com/jrainlau/smartour
官方示例：https://jrainlau.github.io/smartour/

Install

Smartour 被構(gòu)建成了 umd 和 es module 模塊，允許用戶通過不同的方式引入。

npm install smartour

/* ES Modules */
import Smartour from 'smartour/dist/index.esm.js'
/* CommandJS */
const Smartour = require('smartour')
/* <script> */
<script src="smartour/dist/index.js"></script>

基本用法

Smartour 提供了一個(gè)非常簡單的 API focus(), 這是高亮一個(gè)元素最簡單的方式。

let tour = new Smartour()

tour.focus({
 el: '#basic-usage'
})

插槽 Slot

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

純字符串:

let tour = new Smartour()

tour.focus({
 el: '#pure-string',
 slot: 'This is a pure string'
})

Html 字符串

let tour = new Smartour()

tour.focus({
 el: '#html-string',
 slot: `
  <div>
   <p>This is a html string</p>
  </div>
 `
})

插槽位置

插槽的位置可以選擇4個(gè)不同的方向: top, right, left, bottom.

設(shè)置 options.slotPosition 屬性即可覆蓋默認(rèn)的 top 位置。

let tour = new Smartour()

tour.focus({
 el: '#slot-positions',
 slot: `top`,
 options: {
  slotPosition: 'top' // 默認(rèn)為 `top`
 }
})

插槽事件

插槽所定義的元素也可以綁定事件。我們通過 keyNodes 屬性來為插槽元素綁定事件。

keyNodes 是內(nèi)容為一系列 keyNode 的數(shù)組。 屬性 keyNode.el 是一個(gè) css 選擇器，而 keyNode.event 屬性則是對應(yīng)元素所綁定的事件。

let tour = new Smartour()

tour.focus({
 el: '.slot-events-demo',
 options: {
  slotPosition: 'right'
 },
 slot: `

   Click here to occur an alert event
  </button>

   Click here to occur an alert event
  </button>
 `,
 keyNodes: [{
  el: '.occur-1',
  event: () => { alert('Event!!') }
 }, {
  el: '.occur-2',
  event: () => { alert('Another event!!') }
 }]
})

Queue

有的時(shí)候頁面需要不止一個(gè)導(dǎo)覽。Smartour 允許你把一系列的導(dǎo)覽通過 .queue() 放在一起，然后挨個(gè)挨個(gè)地展示它們。

舉個(gè)例子:

let tour = new Smartour()

tour
 .queue([{
  el: '.li-1',
  options: {
   layerEvent: tour.next.bind(tour)
  },
  slot: 'This is the 1st line.'
 }, {
  el: '.li-2',
  options: {
   layerEvent: tour.next.bind(tour)
  },
  slot: 'This is the 2nd line.'
 }, {
  el: '.li-3',
  options: {
   layerEvent: tour.next.bind(tour)
  },
  slot: 'This is the 3rd line.'
 }])
 .run() // 別忘了調(diào)用 `run()` 方法去展示第一個(gè)導(dǎo)覽

選項(xiàng)

Smartour 是一個(gè)構(gòu)建函數(shù)，它接收一個(gè) options 參數(shù)去覆蓋其默認(rèn)選項(xiàng)

讓我們看看它的默認(rèn)選項(xiàng)是什么樣子的：

{
 prefix: 'smartour', // class 前綴
 padding: 5, // 高亮區(qū)域內(nèi)邊距
 maskColor: 'rgba(0, 0, 0, .5)', // 帶透明值的遮罩層顏色
 animate: true, // 是否使用動(dòng)畫
 slotPosition: 'top' // 默認(rèn)的插槽位置
 layerEvent: smartour.over // 遮罩層點(diǎn)擊事件，默認(rèn)為結(jié)束導(dǎo)覽
}

APIs

除了 .focus()，.queue() 和 .run() API 以外，Smartour 還提供了另外三個(gè) API 專門用于控制導(dǎo)覽的展示。

• .next()：展示下一個(gè)導(dǎo)覽（只能配合 .queue() 使用）。
• .prev()：展示上一個(gè)導(dǎo)覽（只能配合 .queue() 使用）。
• .over()：結(jié)束全部導(dǎo)覽。

Smartour 的原理

Smartour 通過 element.getBoundingClientRect() api 來獲取目標(biāo)元素的寬高和位置信息，然后放置一個(gè)帶著 box-shadow 樣式的元素在其之上作為高亮區(qū)域。

由于點(diǎn)擊事件無法再 box-shadow 的區(qū)域里觸發(fā)，所以 Smartour 還放置了一個(gè)全屏透明的遮罩層用于綁定 layerEvent 事件。

高亮區(qū)域和插槽都被設(shè)置為 absolute。當(dāng)頁面滾動(dòng)時(shí)，document.documentElement.scrollTop 或者 document.documentElement.scrollLeft 的值就會變化，然后 Smartour 會實(shí)時(shí)修正它的位置信息。

證書

MIT

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論