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 相关文章推荐
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 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获得文件扩展名三法
2006/11/25 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python和C语言混合编程实例
2014/06/04 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
python数据结构之链表的实例讲解
2017/07/25 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
思想品德自我评价
2014/02/04 职场文书
财务主管岗位职责
2014/02/28 职场文书
学期评语大全
2014/04/30 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
2015年征兵工作总结
2015/07/23 职场文书
小学主题班会教案
2015/08/17 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python