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


Posted in Javascript onJuly 19, 2019

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

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!!') }
 }]
})

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 专门用于控制导览的展示。

  • .next():展示下一个导览(只能配合 .queue() 使用)。
  • .prev():展示上一个导览(只能配合 .queue() 使用)。
  • .over():结束全部导览。

Smartour 的原理

Smartour 通过 element.getBoundingClientRect() api 来获取目标元素的宽高和位置信息,然后放置一个带着 box-shadow 样式的元素在其之上作为高亮区域。

由于点击事件无法再 box-shadow 的区域里触发,所以 Smartour 还放置了一个全屏透明的遮罩层用于绑定 layerEvent 事件。

高亮区域和插槽都被设置为 absolute。当页面滚动时,document.documentElement.scrollTop 或者 document.documentElement.scrollLeft 的值就会变化,然后 Smartour 会实时修正它的位置信息。

证书

MIT

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
学习jquery之一
Apr 27 Javascript
javascript eval函数深入认识
Feb 21 Javascript
实现JavaScript中继承的三种方式
Oct 16 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
bootstrap Table实现合并相同行
Jul 19 #Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 #Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 #Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 #Javascript
bootstrap table插件动态加载表头
Jul 19 #Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 #Javascript
VueJS 取得 URL 参数值的方法
Jul 19 #Javascript
You might like
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python如何保证输入键入数字的方法
2019/08/23 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
为什么相对PHP黑python的更少
2020/06/21 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
python音频处理的示例详解
2020/12/23 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
市场营销专业毕业生自荐信
2013/11/02 职场文书
总经理职责
2013/12/22 职场文书
媒体宣传策划方案
2014/05/25 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书