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 easyui window 窗口关闭时的提示
Jun 22 Javascript
javascript测试题练习代码
Oct 10 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
JavaScript作用域链实例详解
Jan 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中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python计算文本文件行数的方法
2015/07/06 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
python将list转为matrix的方法
2018/12/12 Python
Pytorch之保存读取模型实例
2019/12/30 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
python为什么要安装到c盘
2020/07/20 Python
python 实现超级玛丽游戏
2020/11/25 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
名人演讲稿范文
2013/12/28 职场文书
社团文化节策划书
2014/02/01 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2015元旦感言
2015/12/09 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android