When there is a big adjustment in the content of the webpage, a navigation function is often needed to tell the user that the so-and-so function has been adjusted to another position. The more conventional method is to add a cover layer, highlight the adjusted area, and then complete the guidance through text introduction. We call this function “navigation” andSmartourThe function of this tour guide is separated, providing a solution out of the box.
Project address:https://github.com/jrainlau/s …
Official examples:https://jrainlau.github.io/sm …
Installation
SmartourWas built intoumd
Module, allowing users to introduce through different ways.
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()
Configuration item
Smartour()
Is a constructor that accepts aoptions
Object as its configuration item.
{
// `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()
Accept oneTourList
Parameter, this parameter contains some columnsTourListItem
An array of.[{ //`el`is the CSS selector for the element to be highlighted el: '#id-1', //`slot` is an html string for navigation content slot: ` <p>This is a demo...<p> <button class="key-1">Cancel</button> <button class="key-2">OK</button> `, //`keynodes` define the html node of the navigation content and the events to which it is bound 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()
The method is used to show the next tour. It returns a file that containsSmartour
Promise of the instance.const tour = new Smartour().queue(TourList) Next ()//Show the first tour Await sleep(2000) // delay 2 seconds Next ()//Show the second tour
-
prev()
.prev()
The method is used to show the previous tour. It returns a file that containsSmartour
Promise of the instance.const tour = new Smartour().queue(TourList) Next ()//Show the first tour Await sleep(2000) // delay 2 seconds Next ()//Show the second tour Await sleep(2000) // delay 2 seconds Await tour.prev() // re-show the first tour.
-
over()
.over()
Used to remove all navigation.const tour = new Smartour().queue(TourList) Next ()//Show the first tour Await sleep(2000) // delay 2 seconds Over ()//remove all navigation
-
reset(options)
For
Smartour
Instance to reset the configuration item.const tour = new Smartour().queue(TourList) Next ()//Show the first tour Await sleep(2000) // delay 2 seconds tour.reset({ maskStyle: ` border-radius: 5px; //Set fillet for highlight area ` }) Next ()//shows the next tour
Use example
Such asOfficial example, whichSmartourThe usage of is as follows:
<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()
Certificate
MIT