Smartour 讓網頁導覽變得更簡單(推薦)

2024-05-06 16:53:27

字體：大中小

來源：轉載

供稿：網友

本文介紹了Smartour 讓網頁導覽變得更簡單，分享給大家，具體如下：

Smartour,網頁導覽

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

項目地址：https://github.com/jrainlau/smartour
官方示例：https://jrainlau.github.io/smartour/

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 專門用于控制導覽的展示。