Smartour — простая веб-навигация

JavaScript
Smartour — простая веб-навигация

Когда содержимое веб-страницы значительно изменено, часто требуется функция навигации, чтобы сообщить пользователю, что функция определенного была изменена на другую позицию. Более распространенный способ — добавить маску, выделить область, которую нужно отрегулировать, а затем завершить руководство с помощью текстового введения. Мы называем эту функцию «навигацией».SmartourОн извлекает функцию этого тура и предоставляет готовое решение.

адрес проекта:GitHub.com/называется дождь AU/что…Официальный пример:jrainlau.github.io/smartour

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Предоставляет очень простой APIfocus(), что является самым простым способом выделить элемент.

let tour = new Smartour()

tour.focus({
  el: '#basic-usage'
})

Слот

слот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`
  }
})
```buttonslot-bottom">Bottom</buttonbuttonbutton>

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

`keyNodes` 是内容为一系列 `keyNode` 的数组。 属性 `keyNode.el` 是一个 css 选择器，而 `keyNode.event` 属性则是对应元素所绑定的事件。

```javascript
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

Категории