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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
vue键盘事件点击事件加native操作
Jul 27 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分页的功能模块
2015/06/16 PHP
php自动载入类用法实例分析
2016/06/24 PHP
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
python开发中module模块用法实例分析
2015/11/12 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python创建学生成绩管理系统
2019/11/22 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
印度在线购物网站:Paytmmall
2019/07/24 全球购物
应届毕业生求职信范文
2013/12/18 职场文书
大学军训感想
2014/02/12 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
舞出我人生观后感
2015/06/16 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
《社戏》教学反思
2016/02/22 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书