建站
咨詢
售后
建站咨詢
新聞中心
在遇到網(wǎng)頁內(nèi)容有著較大調(diào)整的時(shí)候，往往需要一個(gè)導(dǎo)覽功能去告訴用戶，某某功能已經(jīng)調(diào)整到另外一個(gè)位置。比較常規(guī)的辦法是添加一個(gè)蒙層，高亮顯示被調(diào)整的區(qū)域，然后通過文字介紹去完成引導(dǎo)。我們把這個(gè)功能稱為“導(dǎo)覽”，而 Smartour 則把這個(gè)導(dǎo)覽的功能抽離出來，提供了一個(gè)開箱即用的解決方案。
創(chuàng)新互聯(lián)公司致力于網(wǎng)站建設(shè),網(wǎng)站制作設(shè)計(jì),營(yíng)銷網(wǎng)頁按需定制制作,成都外貿(mào)網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),小程序定制開發(fā),網(wǎng)站SEO優(yōu)化,網(wǎng)站設(shè)計(jì)制作案例豐富,是成都做網(wǎng)站公司和建站公司,歡迎咨詢。
項(xiàng)目地址： https://github.com/jrainlau/s...
官方示例： https://jrainlau.github.io/sm...
Install
Smartour 被構(gòu)建成了 umd 和 es module 模塊，允許用戶通過不同的方式引入。
- npm install smartour
- /* ES Modules */
- import Smartour from 'smartour/dist/index.esm.js'
- /* CommandJS */
- const Smartour = require('smartour')
- /*
基本用法
Smartour 提供了一個(gè)非常簡(jiǎn)單的 API focus(), 這是高亮一個(gè)元素最簡(jiǎn)單的方式。
- let tour = new Smartour()
- tour.focus({
- el: '#basic-usage'
- })
插槽 Slot
插槽 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: `
This is a html string
- `
- })
插槽位置
插槽的位置可以選擇4個(gè)不同的方向: top, right, left, bottom.
設(shè)置 options.slotPosition 屬性即可覆蓋默認(rèn)的 top 位置。
- let tour = new Smartour()
- tour.focus({
- el: '#slot-positions',
- slot: `top`,
- options: {
- slotPosition: 'top' // 默認(rèn)為 `top`
- }
- })
插槽事件
插槽所定義的元素也可以綁定事件。我們通過 keyNodes 屬性來為插槽元素綁定事件。
keyNodes 是內(nèi)容為一系列 keyNode 的數(shù)組。 屬性 keyNode.el 是一個(gè) css 選擇器，而 keyNode.event 屬性則是對(duì)應(yīng)元素所綁定的事件。
- 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('Event!!') }
- }, {
- el: '.occur-2',
- event: () => { alert('Another event!!') }
- }]
- })
Queue
有的時(shí)候頁面需要不止一個(gè)導(dǎo)覽。Smartour 允許你把一系列的導(dǎo)覽通過 .queue() 放在一起，然后挨個(gè)挨個(gè)地展示它們。
舉個(gè)例子：
- 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.'
- }])
選項(xiàng)
Smartour 是一個(gè)構(gòu)建函數(shù)，它接收一個(gè) options 參數(shù)去覆蓋其默認(rèn)選項(xiàng)。
讓我們看看它的默認(rèn)選項(xiàng)是什么樣子的：
- {
- prefix: 'smartour', // class 前綴
- padding: 5, // 高亮區(qū)域內(nèi)邊距
- maskColor: 'rgba(0, 0, 0, .5)', // 帶透明值的遮罩層顏色
- animate: true, // 是否使用動(dòng)畫
- slotPosition: 'top' // 默認(rèn)的插槽位置
- layerEvent: smartour.over // 遮罩層點(diǎn)擊事件，默認(rèn)為結(jié)束導(dǎo)覽
- }
APIs
除了 .focus()，.queue() 和 .run() API 以外，Smartour 還提供了另外三個(gè) API 專門用于控制導(dǎo)覽的展示。
.next()：展示下一個(gè)導(dǎo)覽（只能配合.queue()使用）。.prev()：展示上一個(gè)導(dǎo)覽（只能配合.queue()使用）。.over()：結(jié)束全部導(dǎo)覽。
Smartour 的原理
Smartour 通過 element.getBoundingClientRect() api 來獲取目標(biāo)元素的寬高和位置信息，然后放置一個(gè)帶著 box-shadow 樣式的元素在其之上作為高亮區(qū)域。
由于點(diǎn)擊事件無法再 box-shadow 的區(qū)域里觸發(fā)，所以 Smartour 還放置了一個(gè)全屏透明的遮罩層用于綁定 layerEvent 事件。
高亮區(qū)域和插槽都被設(shè)置為 absolute。當(dāng)頁面滾動(dòng)時(shí)，document.documentElement.scrollTop 或者 document.documentElement.scrollLeft 的值就會(huì)變化，然后 Smartour 會(huì)實(shí)時(shí)修正它的位置信息。
當(dāng)前名稱：Smartour，讓網(wǎng)頁導(dǎo)覽變得更簡(jiǎn)單
文章分享：http://m.5511xx.com/article/dpgsijg.html
