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 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
谈谈JS中的!!
Dec 07 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
JS中的继承操作实例总结
Jun 06 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(1)
2006/10/09 PHP
开发大型PHP项目的方法
2006/10/09 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
python3.x实现base64加密和解密
2019/03/28 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
法学个人求职信范文
2014/01/27 职场文书
如何撰写岗位职责
2014/02/01 职场文书
优乐美广告词
2014/03/14 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
感恩教师节主题班会
2015/08/12 职场文书
放假通知怎么写
2015/08/18 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
Redis可视化客户端小结
2021/06/10 Redis