成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

SHERlocked93 / 3441人閱讀

摘要：比較常規(guī)的辦法是添加一個(gè)蒙層，高亮顯示被調(diào)整的區(qū)域，然后通過(guò)文字介紹去完成引導(dǎo)。基本用法提供了一個(gè)非常簡(jiǎn)單的這是高亮一個(gè)元素最簡(jiǎn)單的方式。插槽插槽是用于為高亮元素提供描述的字符串。

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

項(xiàng)目地址：https://github.com/jrainlau/s...
官方示例：https://jrainlau.github.io/sm...
Install

Smartour 被構(gòu)建成了 umd 和 es module 模塊，允許用戶通過(guò)不同的方式引入。

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`
  }
})
插槽事件

插槽所定義的元素也可以綁定事件。我們通過(guò) keyNodes 屬性來(lái)為插槽元素綁定事件。

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í)候頁(yè)面需要不止一個(gè)導(dǎo)覽。Smartour 允許你把一系列的導(dǎo)覽通過(guò) .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."
  }])
  .run() // 別忘了調(diào)用 `run()` 方法去展示第一個(gè)導(dǎo)覽
選項(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)畫(huà)
  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 通過(guò) element.getBoundingClientRect() api 來(lái)獲取目標(biāo)元素的寬高和位置信息，然后放置一個(gè)帶著 box-shadow 樣式的元素在其之上作為高亮區(qū)域。

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

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

證書(shū)

MIT

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105246.html

相關(guān)文章

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

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

    pkhope 評(píng)論0 收藏0

  • 前端插件庫(kù)

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

    高勝山 評(píng)論0 收藏0

  • 前端插件庫(kù)

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

    shusen 評(píng)論0 收藏0

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

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

    vslam 評(píng)論0 收藏0

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

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

    stdying 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<