Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use Smartour". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use Smartour.

Install

Smartour is built into umd and es module modules that allow users to introduce them in different ways.

Npm install smartour/* ES Modules * / import Smartour from 'smartour/dist/index.esm.js' / * CommandJS * / const Smartour = require (' smartour') / * * / basic usage

Smartour provides a very simple API focus (), which is the easiest way to highlight an element.

Let tour = new Smartour () tour.focus ({el:'# basic-usage'}) slot Slot

Slot slot is an html string used to provide a description for highlighted elements.

Pure string: let tour = new Smartour () tour.focus ({el:'# pure-string', slot: 'This is a pure string'}) Html string let tour = new Smartour () tour.focus ({el:' # html-string', slot: `

This is a html string

`}) slot location

The location of the slot can be selected in 4 different directions: top, right, left, bottom.

Setting the options.slotPosition property overrides the default top location.

Let tour = new Smartour () tour.focus ({el:'# slot-positions', slot: `top`, options: {slotPosition: 'top' / / defaults to `top`}) slot event

Elements defined by slots can also be bound to events. We bind events to the slot element through the keyNodes attribute.

KeyNodes is an array containing a series of keyNode. The attribute keyNode.el is a css selector, while the keyNode.event attribute is the event bound by the corresponding element.

Let tour = new Smartour () tour.focus ({el: '.slot-events-demo', options: {slotPosition:' right'}, slot: `Click here to occur an alert event Click here to occur an alert event `, keyNodes: [{el: '.occur-1', event: () = > {alert (' Eventures others')}}, {el:'. Occur-2' Event: () = > {alert ('Another eventual events')}}]}) Queue

Sometimes the page needs more than one guide. Smartour allows you to put a series of guided tours together through .queue () and show them one by one.

For example:

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.'}]) option

Smartour is a builder that takes an options parameter to override its default options.

Let's see what its default options look like:

{prefix: 'smartour', / / class prefix padding: 5, / / Inner margin maskColor:' rgba (0,0,0, .5)', / / Mask layer color with transparency value animate: true, / / whether to use animated slotPosition: 'top' / / default slot location layerEvent: smartour.over / / Mask layer click event, default to end navigation} APIs

In addition to .focus (), .queue () and .run () API, Smartour provides three other API displays specifically for controlling navigation.

.next (): displays the next navigation (can only be used with .queue ()).

.prev (): shows the previous navigation (can only be used with .queue ()).

.over (): ends the entire tour.

The principle of Smartour

Smartour uses element.getBoundingClientRect () api to get the width, height and position information of the target element, and then places an element with box-shadow style on top of it as a highlighted area.

Since click events cannot be triggered in the area of box-shadow, Smartour also places a full-screen transparent mask layer for binding layerEvent events.

The highlighted areas and slots are set to absolute. When the page scrolls, the value of document.documentElement.scrollTop or document.documentElement.scrollLeft changes, and Smartour corrects its location information in real time.

Thank you for your reading, the above is the content of "how to use Smartour", after the study of this article, I believe you have a deeper understanding of how to use Smartour, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.