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中String和StringBuffer的速度之争
Apr 01 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 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读取文件内容的几种方法详解
2013/06/26 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
如何基于python实现不邻接植花
2020/05/01 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
公司部门司机岗位职责
2014/01/03 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
大学生校园创业计划书
2014/02/08 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
新郎新娘致辞
2015/07/31 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle