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

栏目: Html · 发布时间: 5年前

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

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

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

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

安装

Smartour被构建成了 umd 模块，允许用户通过不同的方式引入。

npm install smartour

/* ES Modules */
import Smartour from 'smartour'
/* CommandJS */
const Smartour = require('smartour')
/* <script> */
<script src="smartour/dist/index.js"></script>

const tour = new Smartour().queue([{
  el: '#id',
  slot: `
    <p>Something you want to guide to the visitors</p>
  `
}])

tour.next()

配置项

Smartour() 是一个构建函数，它接受一个 options 对象作为其配置项。

{
  // `maskStyle` 为导览蒙层的样式
  // 默认值将会和配置的值叠加，配置的内容可覆盖默认值
  markStyle: `
    position: fixed;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
    z-index: 9998;
  `, // 默认值

  // `slotStyle` 是导览介绍内容的样式
  // 默认值将会和配置的值叠加，配置的内容可覆盖默认值
  slotStyle: `
    position: fixed;
    z-index: 9999;
  }` // 默认值

  // `maskPadding` 设置高亮区域的内边距
  maskPadding: { vertical: 5, horizontal: 5 }, // 默认值（垂直、水平）

  // `slotPosition` 设置导览介绍内容的位置
  // 可选项为：'top', 'top-right', 'top-left', 'bottom', 'bottom-right', 'bottom-left'
  slotPosition: 'bottom', // 默认值

  // `maskEventType` 导览蒙层事件触发的方式
  // 可选项为：'click', 'mouseon', 'mouseover', 'mousedown', 'mousemove', 'mouseup', 'touchstart', 'touchmove', 'touchend'
  maskEventType: 'click', // 默认值

  // `maskEvent` 导览蒙层事件
  maskEvent: () => {} // 默认值

API

queue(TourList)

.queue() 接受一个 TourList 参数, 这个参数是包含了一些列 TourListItem 的数组。

[{
  // `el` 为需要高亮的元素的CSS选择器
  el: '#id-1',

  // `slot` 是导览内容的html字符串
  slot: `
    <p>This is a demo...<p>
    <button class="key-1">Cancel</button>
    <button class="key-2">OK</button>
  `,

  // `keyNodes` 定义了导览内容的 html 节点和其所绑定的事件
  keyNodes: [{
    el: '.key-1',
    eventType: 'click',
    event: (e) => {
      alert('Click "Cancel" button')
    }
  }, {
    el: '.key-2',
    eventType: 'mouseover',
    event: (e) => {
      alert('Hover "OK" button')
    }
  }]
}]

next()

.next() 方法用于展示下一个导览。它返回一个包含了 Smartour 实例的 Promise。

const tour = new Smartour().queue(TourList)

await tour.next() // 展示第一个导览
await sleep(2000) // 延时2秒
await tour.next() // 展示第二个导览

prev()

.prev() 方法用于展示上一个导览。它返回一个包含了 Smartour 实例的 Promise。

const tour = new Smartour().queue(TourList)

await tour.next() // 展示第一个导览
await sleep(2000) // 延时2秒
await tour.next() // 展示第二个导览
await sleep(2000) // 延时2秒
await tour.prev() // 重新展示第一个导览

over(smartourInstance)

.over(smartourInstance) 用于移除所有的导览。

const tour = new Smartour().queue(TourList)

await tour.next() // 展示第一个导览
await sleep(2000) // 延时2秒

tour.over(tour) // 移除所有导览

reset(options)

为 Smartour 实例重新设置配置项。

const tour = new Smartour().queue(TourList)

await tour.next() // 展示第一个导览
await sleep(2000) // 延时2秒

tour.reset({
  maskStyle: `
    border-radius: 5px; // 为高亮区域设置圆角
  `
})
tour.next() // 展示下一个导览

使用例子

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

如官方示例，其 Smartour 的用法如下：

<body>
  <main>
    <h1 class="title">Smartour</h1>
    <h3 class="desc">Makes website guiding easier</h3>
    <a class="link" href="https://github.com/jrainlau/smartour/blob/master/README.md#smartour">Document</a>
  </main>
</body>

const tour = new Smartour({
  slotPosition: 'top',
  maskStyle: `border-radius: 4px;`
}).queue([{
  el: '.title',
  slot: `
    <div class="guide guide-1">
      <p>This is my name!</p>
      <button class="btn btn-1">OK.</button>
    </div>
  `,
  keyNodes: [{
    el: '.btn-1',
    event () {
      tour.reset({
        slotPosition: 'bottom-right',
        maskStyle: `border-radius: 4px;`
      })
      tour.next()
    }
  }]
}, {
  el: '.desc',
  slot: `
    <div class="guide guide-2">
      <p>This is what my job is!</p>
      <button class="btn btn-2">Yeah.</button>
    </div>
  `,
  keyNodes: [{
    el: '.btn-2',
    event () {
      tour.reset({
        slotPosition: 'bottom',
        maskStyle: `border-radius: 4px;`
      })
      tour.next()
    }
  }]
}, {
  el: '.link',
  slot: `
    <div class="guide guide-3">
      <p>This is the document!</p>
      <button class="btn btn-3">Got it.</button>
    </div>
  `,
  keyNodes: [{
    el: '.btn-3',
    event () {
      tour.over(tour)
    }
  }]
}])

tour.next()

证书

MIT

以上所述就是小编给大家介绍的《Smartour——让网页导览变得更简单》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

The Web Designer's Idea Book, Vol. 2

Patrick McNeil / How / 2010-9-19 / USD 30.00

Web Design Inspiration at a Glance Volume 2 of The Web Designer's Idea Book includes more than 650 new websites arranged thematically, so you can easily find inspiration for your work. Auth......一起来看看《The Web Designer's Idea Book, Vol. 2》这本书的介绍吧!

码农工具

SHA 加密

SHA 加密工具

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

安装

配置项

API

使用例子

证书

The Web Designer's Idea Book, Vol. 2

SHA 加密

正则表达式在线测试