亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Smartour——讓網(wǎng)頁導(dǎo)覽變得更簡單

SHERlocked93 / 3501人閱讀

摘要：比較常規(guī)的辦法是添加一個蒙層，高亮顯示被調(diào)整的區(qū)域，然后通過文字介紹去完成引導(dǎo)?；居梅ㄌ峁┝艘粋€非常簡單的這是高亮一個元素最簡單的方式。插槽插槽是用于為高亮元素提供描述的字符串。

在遇到網(wǎng)頁內(nèi)容有著較大調(diào)整的時候，往往需要一個導(dǎo)覽功能去告訴用戶，某某功能已經(jīng)調(diào)整到另外一個位置。比較常規(guī)的辦法是添加一個蒙層，高亮顯示被調(diào)整的區(qū)域，然后通過文字介紹去完成引導(dǎo)。我們把這個功能稱為“導(dǎo)覽”，而 Smartour 則把這個導(dǎo)覽的功能抽離出來，提供了一個開箱即用的解決方案。

項目地址：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 提供了一個非常簡單的 API focus(), 這是高亮一個元素最簡單的方式。

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個不同的方向: top, right, left, bottom.

設(shè)置 options.slotPosition 屬性即可覆蓋默認的 top 位置。

let tour = new Smartour()

tour.focus({
  el: "#slot-positions",
  slot: `top`,
  options: {
    slotPosition: "top" // 默認為 `top`
  }
})
插槽事件

插槽所定義的元素也可以綁定事件。我們通過 keyNodes 屬性來為插槽元素綁定事件。

keyNodes 是內(nèi)容為一系列 keyNode 的數(shù)組。 屬性 keyNode.el 是一個 css 選擇器，而 keyNode.event 屬性則是對應(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

有的時候頁面需要不止一個導(dǎo)覽。Smartour 允許你把一系列的導(dǎo)覽通過 .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() // 別忘了調(diào)用 `run()` 方法去展示第一個導(dǎo)覽
選項

Smartour 是一個構(gòu)建函數(shù)，它接收一個 options 參數(shù)去覆蓋其默認選項

讓我們看看它的默認選項是什么樣子的：

{
  prefix: "smartour", // class 前綴
  padding: 5, // 高亮區(qū)域內(nèi)邊距
  maskColor: "rgba(0, 0, 0, .5)", // 帶透明值的遮罩層顏色
  animate: true, // 是否使用動畫
  slotPosition: "top" // 默認的插槽位置
  layerEvent: smartour.over // 遮罩層點擊事件，默認為結(jié)束導(dǎo)覽
}
APIs

除了 .focus()，.queue() 和 .run() API 以外，Smartour 還提供了另外三個 API 專門用于控制導(dǎo)覽的展示。

.next()：展示下一個導(dǎo)覽（只能配合 .queue() 使用）。

.prev()：展示上一個導(dǎo)覽（只能配合 .queue() 使用）。

.over()：結(jié)束全部導(dǎo)覽。

Smartour 的原理

Smartour 通過 element.getBoundingClientRect() api 來獲取目標元素的寬高和位置信息，然后放置一個帶著 box-shadow 樣式的元素在其之上作為高亮區(qū)域。

由于點擊事件無法再 box-shadow 的區(qū)域里觸發(fā)，所以 Smartour 還放置了一個全屏透明的遮罩層用于綁定 layerEvent 事件。

高亮區(qū)域和插槽都被設(shè)置為 absolute。當頁面滾動時，document.documentElement.scrollTop 或者 document.documentElement.scrollLeft 的值就會變化，然后 Smartour 會實時修正它的位置信息。

證書

MIT

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105246.html

相關(guān)文章

  • ReactJS新聞 #20 React Conf 2017主題演講

    摘要：新聞第期新聞主題演講與分別負責(zé)開場的部份，首先對自年來的發(fā)展情況講演，以及近年來的成長趨勢。會議視頻網(wǎng)址官網(wǎng)以卡通圖畫介紹是即將上市的新核心，也是本次的重點發(fā)表技術(shù)之一，用了卡通畫方式，來解說的設(shè)計與改進之處。 ReactJS新聞 第020期 (2017.03.19) 新聞 React Conf 2017主題演講 Tom、Jing與Sebastian分別負責(zé)開場的keynote部份，...

    pkhope 評論0 收藏0

  • 前端插件庫

    摘要：原文鏈接前端插件庫站點前端開發(fā)文檔博客前端插件庫前端插件庫官網(wǎng)是的函數(shù)庫，目的是強化表格操作如搜索排序，并自動加入組件引入表格中，使用非常靈活簡便。由推出，靈活扎實的建議列表函數(shù)庫。 原文鏈接：前端插件庫站點：前端開發(fā)文檔博客：前端插件庫 前端插件庫 DataTables 官網(wǎng)：https://www.datatables.net/ DataTables是jQuery的JavaScr...

    高勝山 評論0 收藏0

  • 前端插件庫

    摘要：原文鏈接前端插件庫站點前端開發(fā)文檔博客前端插件庫前端插件庫官網(wǎng)是的函數(shù)庫，目的是強化表格操作如搜索排序，并自動加入組件引入表格中，使用非常靈活簡便。由推出，靈活扎實的建議列表函數(shù)庫。 原文鏈接：前端插件庫站點：前端開發(fā)文檔博客：前端插件庫 前端插件庫 DataTables 官網(wǎng)：https://www.datatables.net/ DataTables是jQuery的JavaScr...

    shusen 評論0 收藏0

  • 三里屯、秦淮河、故宮，是什么讓它們走在了一起

    摘要：三里屯秦淮河故宮，是什么讓它們走在了一起物聯(lián)網(wǎng)對于很多人來說是一個既熟悉又陌生的領(lǐng)域，之所以說熟悉是因為物聯(lián)網(wǎng)一詞在過去十幾年間一直被熱炒，國家也將物聯(lián)網(wǎng)上升為戰(zhàn)略發(fā)展高度。 三里屯、秦淮河、故宮，是什么讓它們走在了一起物聯(lián)網(wǎng)對于很多人來說是一個既熟悉又陌生的領(lǐng)域，之所以說熟悉是因為物聯(lián)網(wǎng)一詞在過去十幾年間一直被熱炒，國家也將物聯(lián)網(wǎng)上升為戰(zhàn)略發(fā)展高度。但大多數(shù)人對物聯(lián)網(wǎng)的印象卻又是模糊...

    vslam 評論0 收藏0

  • 三里屯、秦淮河、故宮，是什么讓它們走在了一起

    摘要：三里屯秦淮河故宮，是什么讓它們走在了一起物聯(lián)網(wǎng)對于很多人來說是一個既熟悉又陌生的領(lǐng)域，之所以說熟悉是因為物聯(lián)網(wǎng)一詞在過去十幾年間一直被熱炒，國家也將物聯(lián)網(wǎng)上升為戰(zhàn)略發(fā)展高度。 三里屯、秦淮河、故宮，是什么讓它們走在了一起物聯(lián)網(wǎng)對于很多人來說是一個既熟悉又陌生的領(lǐng)域，之所以說熟悉是因為物聯(lián)網(wǎng)一詞在過去十幾年間一直被熱炒，國家也將物聯(lián)網(wǎng)上升為戰(zhàn)略發(fā)展高度。但大多數(shù)人對物聯(lián)網(wǎng)的印象卻又是模糊...

    stdying 評論0 收藏0

發(fā)表評論

0條評論

SHERlocked93

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<