本文介绍了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!!') } }]})
新闻热点
疑难解答