首页 > 开发 > Javascript > 正文

Smartour 让网页导览变得更简单(推荐)

2020-02-25 00:56:32
字体:
来源:转载
供稿:网友

本文介绍了Smartour 让网页导览变得更简单,分享给大家,具体如下:

在遇到网页内容有着较大调整的时候,往往需要一个导览功能去告诉用户,某某功能已经调整到另外一个位置。比较常规的办法是添加一个蒙层,高亮显示被调整的区域,然后通过文字介绍去完成引导。我们把这个功能称为“导览”,而 Smartour 则把这个导览的功能抽离出来,提供了一个开箱即用的解决方案。

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

Install

Smartour 被构建成了 umdes 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!!') } }]})            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表