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 相关文章推荐
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
javascript时区函数介绍
Sep 14 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
JavaScript迭代器的含义及用法
Jun 21 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
织梦模板标记简介
2007/03/11 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
浅析return false的正确使用
2013/11/04 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
django之常用命令详解
2016/06/30 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
五好家庭事迹材料
2014/12/20 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
Pytest中conftest.py的用法
2021/06/27 Python