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 prototype 使用介绍
Aug 29 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
如何用JS实现简单的数据监听
May 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
德劲1103的维修打理经验
2021/03/02 无线电
php中对2个数组相加的函数
2011/06/24 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
使用python实现多维数据降维操作
2020/02/24 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
法律专业应届生自荐信范文
2014/01/06 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
少年闰土教学反思
2014/02/22 职场文书
学习两会精神心得范文
2014/03/17 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
小学中队委竞选稿
2015/11/20 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android