Smartour——讓網頁導覽變得更簡單

jrainlau發表於2019-07-02
網頁

Jul-04-2019 18-07-06

在遇到網頁內容有著較大調整的時候，往往需要一個導覽功能去告訴使用者，某某功能已經調整到另外一個位置。比較常規的辦法是新增一個蒙層，高亮顯示被調整的區域，然後通過文字介紹去完成引導。我們把這個功能稱為“導覽”，而 Smartour 則把這個導覽的功能抽離出來，提供了一個開箱即用的解決方案。

專案地址：https://github.com/jrainlau/s...
官方示例：https://jrainlau.github.io/sm...

Install

Smartour 被構建成了 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 提供了一個非常簡單的 API focus(), 這是高亮一個元素最簡單的方式。

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個不同的方向: top, right, left, bottom.

設定 options.slotPosition 屬性即可覆蓋預設的 top 位置。

let tour = new Smartour()

tour.focus({
  el: '#slot-positions',
  slot: `top`,
  options: {
    slotPosition: 'top' // 預設為 `top`
  }
})

插槽事件

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

keyNodes 是內容為一系列 keyNode 的陣列。 屬性 keyNode.el 是一個 css 選擇器，而 keyNode.event 屬性則是對應元素所繫結的事件。

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

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

舉個例子:

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() // 別忘了呼叫 `run()` 方法去展示第一個導覽

選項

Smartour 是一個構建函式，它接收一個 options 引數去覆蓋其預設選項

讓我們看看它的預設選項是什麼樣子的：

{
  prefix: 'smartour', // class 字首
  padding: 5, // 高亮區域內邊距
  maskColor: 'rgba(0, 0, 0, .5)', // 帶透明值的遮罩層顏色
  animate: true, // 是否使用動畫
  slotPosition: 'top' // 預設的插槽位置
  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 會實時修正它的位置資訊。

證照

MIT

相關文章