Smartour 介绍
一旦网站改变了UI，通常他们会设置 一个 导游列表来告诉访问者，一些模块被移动到其他地方。 我们将其命名为“导游”，Smartour是 一个 使导游更容易的 解决方 案。?
在遇到网页 内容 有着较大调整的时候，往往需要 一个 导览 功能 去告诉 用户 ，某某 功能 已经调整到另外 一个 位置。比较常规的办法是 添加 一个 蒙层，高亮 显示 被调整的区域，然后通过 文字 介绍去完成引导。我们把这个 功能 称为“导览”，而 Smartour 则把这个导览的 功能 抽离出来，提供了 一个 开箱即用的 解决方 案。
Install
Smartour 被构建成了 umd 和 es module 模块，允许 用户 通过不同的方式引入。
npm install smartour
/* ES Modules */
import Smartour from 'smartour/ dis t/index.esm.js'
/* Commandjs */
const Smartour = require('smartour')
/* <script> */
<script src="smartour/ dis t/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,b ott om.
设置 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',
slot: 'This is the 2nd line.'
},{
el: '.li-3',
slot: 'This is the 3rd line.'
}])
.run() // 别忘了 调用 `run()` 方法 去展示第 一个 导览
选项
Smartour 是 一个 构建 函数 ，它接收 一个 options 参数去覆盖其 默 认选项
让我们看看它的 默 认选项是什么样子的：
{
prefix: 'smartour',// class 前缀
padding: 5,// 高亮区域内边距
maskColor: 'rgba(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 会实时修正它的位置信息。
?
网站地址 : https://jrainlau.github.io/smartour/
GitHub: https://github.com/jrainlau/smartour
网站描述: 让网页导览变得更简单
Smartour官方网站
官方网站： https://jrainlau.github.io/smartour/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。