您现在的位置是：亿华云 > 域名

Smartour，让网页导览变得更简单

亿华云2025-10-02 19:00:31【域名】4人已围观

简介在遇到网页内容有着较大调整的时候，往往需要一个导览功能去告诉用户，某某功能已经调整到另外一个位置。比较常规的办法是添加一个蒙层，高亮显示被调整的区域，然后通过文字介绍去完成引导。我们把这个功能称为“导

在遇到网页内容有着较大调整的让网时候，往往需要一个导览功能去告诉用户，页导某某功能已经调整到另外一个位置。览变比较常规的得更办法是添加一个蒙层，高亮显示被调整的简单区域，然后通过文字介绍去完成引导。让网我们把这个功能称为“导览”，页导而 Smartour 则把这个导览的览变功能抽离出来，提供了一个开箱即用的得更解决方案。

项目地址：https://github.com/jrainlau/s...

官方示例：https://jrainlau.github.io/sm...

Install

Smartour 被构建成了 umd 和 es 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. }])

选项

Smartour 是一个构建函数，它接收一个 options 参数去覆盖其默认选项。

让我们看看它的默认选项是什么样子的：

{ prefix: smartour, // class 前缀 padding: 5, // 高亮区域内边距 maskColor: rgba(0, 0, 0, .5), // 带透明值的遮罩层颜色 animate: true, // 是云南idc服务商否使用动画 slotPosition: top // 默认的插槽位置 layerEvent: smartour.over // 遮罩层点击事件，默认为结束导览 }