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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Smartour 让网页导览变得更简单(推荐)

    本文介绍了Smartour 让网页导览变得更简单,分享给大家,具体如下: 在遇到网页内容有着较大调整的时候,往往需要一个导览功能去告诉用户,某某功能已经调整到另外一个位置.比较常规的办法是添加一个蒙层,高亮显示被调整的区域,然后通过文字介绍去完成引导.我们把这个功能称为"导览",而 Smartour 则把这个导览的功能抽离出来,提供了一个开箱即用的解决方案. 项目地址:https://github.com/jrainlau/smartour 官方示例:https://jrainlau.

  • 让文件路径提取变得更简单的Python Path库

    一.Path 是什么? 该模块提供表示文件系统路径的类,其语义适用于不同的操作系统.路径类被分为提供纯计算操作而没有 I/O 的 纯路径,以及从纯路径继承而来但提供 I/O 操作的 具体路径. 在一些用例中纯路径很有用,例如: 如果你想要在 Unix 设备上操作 Windows 路径(或者相反).你不应在 Unix 上实例化一个 WindowsPath,但是你可以实例化 PureWindowsPath. 你只想操作路径但不想实际访问操作系统.在这种情况下,实例化一个纯路径是有用的,因为它们没有任

  • VSCode使React Vue代码调试变得更爽

    目录 引言 用 VSCode 调试 React 代码 用 VSCode 调试 Vue 代码 总结 引言 作为前端开发,基本每天都要调试 Vue/React 代码,不知道大家都是怎么调试的,但我猜大概有这么几种: 不调试,直接看代码找问题 console.log 打印日志 用 Chrome Devtools 的 debugger 来调试 用 VSCode 的 debugger 来调试 不同的调试方式效率和体验是不一样的,我现在基本都是用 VSCode debugger 来调试,效率又高.体验又爽.

  • JS实现网页表格自动变大缩小的方法

    本文实例讲述了JS实现网页表格自动变大缩小的方法.分享给大家供大家参考.具体分析如下: 这就是一个个性的动态表格效果代码,网页中的表格自动放大或者缩小,不停的变化 主要就是一个强调显示的作用 复制代码 代码如下: <HTML> <HEAD> <TITLE>js会动的表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-Type>

  • Asp.net SignalR 让实时通讯变得如此简单

    巡更项目中,需要发送实时消息,以及需要任务开始提醒,于是便有机会接触到SignalR,在使用过程中,发现用SignalR实现通信非常简单,下面我思明将从三个方面分享一下: 一.SignalR是什么 Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中WebSockets出现,SignalR也支持WebSockets通信.另外SignalR开发的程序不仅

  • python 实现上传图片并预览的3种方法(推荐)

    在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 test.html <!DOCTYPE html>

  • 如何让Birt报表脚本数据源变得既简单又强大

    概述:运行在 JVM 上的 SQL 函数和存储过程 总所周知,有些数据库没有强大的分析函数(eg. Mysql), 有些数据库没有存储过程(eg. Vertica),当遇到复杂的数据计算,往往只能通过 Python,R 等外部脚本来实现,但这些脚本语言和主流工程语言(Java)集成性不好,如果直接用工程语言实现类似 SQL 函数和存储过程的功能,经常只是针对某个计算需求编写冗长的代码,代码几乎不可复用. 另外,即便拥有强大的分析函数,实现稍复杂的逻辑其实也不算容易,比如下面这种常见的业务计算,找

  • asp.net中通过ALinq让Mysql操作变得如此简单

    1. ADO.NET 方式连接Mysql数据库 经过在网上查找资料,在.net 上连接mysql 数据库有三种方式: 方法一: 使用CoreLab推出的MYSQL访问组件,引用命名空间CoreLab.MySql 方法二: 通过ODBC访问MYSQL数据库, 前要先下载两个组件:odbc.net和MYSQL的ODBC驱动,可以使用ODBC访问Mysql数据库 方法三: 使用MYSQL推出的MySQL Connector/Net is an ADO.NET driver for MySQL,该组件为

  • 利用反射获取Java类中的静态变量名及变量值的简单实例

    JAVA可以通过反射获取成员变量和静态变量的名称,局部变量就不太可能拿到了. public class Test { public static void main(String[] args) throws Exception { // TODO Auto-generated method stub //获取所有变量的值 Class clazz = Class.forName("com.qianmingxs.ScoreTable"); Field[] fields = clazz.g

  • js前端实现多图图片上传预览的两个方法(推荐)

    一.将图片转成icon码的实现方式 html代码: <div class="yanzRight"> <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/> <span class=&qu

随机推荐