智能手机让网页导航变得更容易(推荐)

本文介绍了Smartour，它使网页导航变得更加容易，并与每个人分享，如下所示：

当网页内容有较大调整时，往往需要一个导航功能来告诉用户某个功能已经调整到另一个位置。常规的方法是添加蒙版图层，突出调整后的区域，然后通过文字介绍完成引导。我们称这个功能为“导游”，而Smartour则拿出了这个导游功能，提供了开箱即用的解决方案。

项目地址：https://github.com/jrainlau/smartour官方示例：https://jrainlau.github.io/smartour/Install

Smartour被构建为umd和es模块模块，允许用户以不同的方式介绍它。

npm安装Smartour/* ES Modules */从“Smartour/dist/index . ESM . js”/* CommandJS */const Smartour=require(' Smartour ')/* Script */Script src=' http : Smartour/dist/index . js '/脚本的基本用法

Smartour提供了一个非常简单的API focus()，这是突出显示元素的最简单方法。

let tour=new smart our(). tour . focus({ El : ' # basic-usage ' })插槽

Slot slot是一个html字符串，用于为突出显示的元素提供描述。

纯字符串：

let tour=new smartour()tour . focus({ El : ' #纯字符串'，slot3360 '这是纯字符串' }) HTML字符串

let tour=new smart our(). tour . focus({ El : ' # html-string '，slot 3360 ` div pthisis a html string/p/div ` })槽位置

插槽的位置可以在四个不同的方向选择：顶部、右侧、左侧、底部。

设置options.slotPosition属性以覆盖默认的顶部位置。

let tour=new smartour()tour . focus({ El : ' # slot-positions '，slot 3360 ' top `，options 3360 { slot position : ' top '/默认为' top` }})插槽事件

插槽定义的元素也可以绑定到事件。我们通过keyNodes属性为槽元素绑定事件。

keynodes是一个包含一系列KeyNodes的数组。属性keyNode.el是一个css选择器，属性keyNode.event是对应元素绑定到的事件。

let tour=new Smartour(). tour . focus({ El : }。slot-events-demo '，选项： { slot position : ' right ' }，slot: '单击此处发生警报事件/按钮单击此处发生警报事件/按钮`，keynodes 3360[{ El : }。发生-1 '，event: ()={ alert('Event！')} }，{ el: '。发生-2 '，event: ()={ alert('另一个事件！')} }]})队列

有时一个页面需要多个指南。Smartour允许您将一系列旅游组合在一起。queue()，然后逐个显示它们。

例如，

let tour=new Smartour()tour。队列([{ el: '。li-1 '，选项： { layerevent : tour . next . bind(tour)}，slot: '这是第一行'}，{ el: '。li-2 '，选项： { layerevent : tour . next . bind(tour)}，slot: '这是第2行'}，{ el: '。li-3 '，选项： {层事件：游览。下一个。bind (tour)}，插槽：“这是第3行。”}]).run()//别忘了调用‘run()’方法来显示第一个导航选项

Smartour是一个构建函数，它接收一个选项参数来覆盖它的默认选项

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

{prefix: 'smartour '，//类前缀填充3360 5，//突出显示区域的内边距maskcolor3360' rgba (0，0，0，0.5)'，//透明值为animate: true的遮罩层颜色，//是否使用动画slotPosition: 'top' //默认插槽位置layerEvent: smartour.over //遮罩层单击事件，默认为结束导航} APIs

除了。focus()，队列()和。run() API，Smartour还提供了另外三个专门用于控制导航显示的API。next():显示下一个导航(只能与一起使用。queue())。prev():显示上一个导航(只能与一起使用。queue())。over():结束所有导航。聪明的原则

Smartour通过元素获取目标元素的宽度、高度和位置信息。getboundingclient () API，然后在其上放置一个带有框阴影样式的元素作为高亮区域。

由于点击事件无法在框影区域触发，Smartour还放置了一个全屏透明蒙版层，用于绑定layerEvent事件。

高亮区域和槽都设置为绝对。当页面滚动时，document . document element . scroll top或document . document element . scroll let的值会发生变化，然后Smartour会实时更正其位置信息。

证书

麻省理工学院(Massachu-setts Institute of Technology)

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