在遇到網頁內容有著較大調整的時候，往往需要一個導覽功能去告訴使用者，某某功能已經調整到另外一個位置。比較常規的辦法是新增一個蒙層，高亮顯示被調整的區域，然後通過文字介紹去完成引導。我們把這個功能稱為“導覽”，而 Smartour 則把這個導覽的功能抽離出來，提供了一個開箱即用的解決方案。
專案地址：https://github.com/jrainlau/s...
安裝
Smartour 被構建成了 umd 模組，允許使用者通過不同的方式引入。
npm install smartour/* ES Modules */
import Smartour from 'smartour'
/* CommandJS */
const Smartour = require('smartour')
/* <script> */
<script src="smartour/dist/index.js"></script>const tour = new Smartour().queue([{
el: '#id',
slot: `
<p>Something you want to guide to the visitors</p>
`
}])
tour.next()配置項
Smartour() 是一個構建函式，它接受一個 options 物件作為其配置項。
{
// `maskStyle` 為導覽蒙層的樣式
// 預設值將會和配置的值疊加，配置的內容可覆蓋預設值
markStyle: `
position: fixed;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
z-index: 9998;
`, // 預設值
// `slotStyle` 是導覽介紹內容的樣式
// 預設值將會和配置的值疊加，配置的內容可覆蓋預設值
slotStyle: `
position: fixed;
z-index: 9999;
}` // 預設值
// `maskPadding` 設定高亮區域的內邊距
maskPadding: { vertical: 5, horizontal: 5 }, // 預設值（垂直、水平）
// `slotPosition` 設定導覽介紹內容的位置
// 可選項為：'top', 'top-right', 'top-left', 'bottom', 'bottom-right', 'bottom-left'
slotPosition: 'bottom', // 預設值
// `maskEventType` 導覽蒙層事件觸發的方式
// 可選項為：'click', 'mouseon', 'mouseover', 'mousedown', 'mousemove', 'mouseup', 'touchstart', 'touchmove', 'touchend'
maskEventType: 'click', // 預設值
// `maskEvent` 導覽蒙層事件
maskEvent: () => {} // 預設值API
-
queue(TourList).queue()接受一個TourList引數, 這個引數是包含了一些列TourListItem的陣列。[{ // `el` 為需要高亮的元素的CSS選擇器 el: '#id-1', // `slot` 是導覽內容的html字串 slot: ` <p>This is a demo...<p> <button class="key-1">Cancel</button> <button class="key-2">OK</button> `, // `keyNodes` 定義了導覽內容的 html 節點和其所繫結的事件 keyNodes: [{ el: '.key-1', eventType: 'click', event: (e) => { alert('Click "Cancel" button') } }, { el: '.key-2', eventType: 'mouseover', event: (e) => { alert('Hover "OK" button') } }] }] -
next().next()方法用於展示下一個導覽。它返回一個包含了Smartour例項的 Promise。const tour = new Smartour().queue(TourList) await tour.next() // 展示第一個導覽 await sleep(2000) // 延時2秒 await tour.next() // 展示第二個導覽 -
prev().prev()方法用於展示上一個導覽。它返回一個包含了Smartour例項的 Promise。const tour = new Smartour().queue(TourList) await tour.next() // 展示第一個導覽 await sleep(2000) // 延時2秒 await tour.next() // 展示第二個導覽 await sleep(2000) // 延時2秒 await tour.prev() // 重新展示第一個導覽 -
over().over()用於移除所有的導覽。const tour = new Smartour().queue(TourList) await tour.next() // 展示第一個導覽 await sleep(2000) // 延時2秒 tour.over() // 移除所有導覽 -
reset(options)為
Smartour例項重新設定配置項。const tour = new Smartour().queue(TourList) await tour.next() // 展示第一個導覽 await sleep(2000) // 延時2秒 tour.reset({ maskStyle: ` border-radius: 5px; // 為高亮區域設定圓角 ` }) tour.next() // 展示下一個導覽
使用例子
如 官方示例，其 Smartour 的用法如下：
<body>
<main>
<h1 class="title">Smartour</h1>
<h3 class="desc">Makes website guiding easier</h3>
<a class="link" href="https://github.com/jrainlau/smartour/blob/master/README.md#smartour">Document</a>
</main>
</body>const tour = new Smartour({
slotPosition: 'top',
maskStyle: `border-radius: 4px;`
}).queue([{
el: '.title',
slot: `
<div class="guide guide-1">
<p>This is my name!</p>
<button class="btn btn-1">OK.</button>
</div>
`,
keyNodes: [{
el: '.btn-1',
event () {
tour.reset({
slotPosition: 'bottom-right',
maskStyle: `border-radius: 4px;`
})
tour.next()
}
}]
}, {
el: '.desc',
slot: `
<div class="guide guide-2">
<p>This is what my job is!</p>
<button class="btn btn-2">Yeah.</button>
</div>
`,
keyNodes: [{
el: '.btn-2',
event () {
tour.reset({
slotPosition: 'bottom',
maskStyle: `border-radius: 4px;`
})
tour.next()
}
}]
}, {
el: '.link',
slot: `
<div class="guide guide-3">
<p>This is the document!</p>
<button class="btn btn-3">Got it.</button>
</div>
`,
keyNodes: [{
el: '.btn-3',
event () {
tour.over(tour)
}
}]
}])
tour.next()證照
MIT