日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Smartour，讓網(wǎng)頁導覽變得更簡單

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

創(chuàng)新互聯(lián)公司致力于網(wǎng)站建設,網(wǎng)站制作設計,營銷網(wǎng)頁按需定制制作,成都外貿網(wǎng)站建設,企業(yè)網(wǎng)站建設,小程序定制開發(fā),網(wǎng)站SEO優(yōu)化,網(wǎng)站設計制作案例豐富,是成都做網(wǎng)站公司和建站公司,歡迎咨詢。

項目地址： https://github.com/jrainlau/s...

官方示例： https://jrainlau.github.io/sm...

Install

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

   
 
 
 
        
  
  
  
  1. npm install smartour  
    2.    
 
 

   
 
 
 
        
  
  
  
  1. /* ES Modules */ 
    2.     
  
  
  
  2. import Smartour from 'smartour/dist/index.esm.js' 
    3.     
  
  
  
  3. /* CommandJS */ 
    4.     
  
  
  
  4. const Smartour = require('smartour') 
    5.     
  
  
  
  5. /*  
    6.

基本用法

Smartour 提供了一個非常簡單的 API focus(), 這是高亮一個元素最簡單的方式。

   
 
 
 
        
  
  
  
  1. let tour = new Smartour() 
    2.     
  
  
  
  2.  
    3.     
  
  
  
  3. tour.focus({ 
    4.     
  
  
  
  4.   el: '#basic-usage' 
    5.     
  
  
  
  5. }) 
    6.

插槽 Slot

插槽 slot 是用于為高亮元素提供描述的 html 字符串。

純字符串:

   
 
 
 
        
  
  
  
  1. let tour = new Smartour() 
    2.     
  
  
  
  2.  
    3.     
  
  
  
  3. tour.focus({ 
    4.     
  
  
  
  4.   el: '#pure-string', 
    5.     
  
  
  
  5.   slot: 'This is a pure string' 
    6.     
  
  
  
  6. }) 
    7.

Html 字符串

   
 
 
 
        
  
  
  
  1. let tour = new Smartour() 
    2.     
  
  
  
  2.  
    3.     
  
  
  
  3. tour.focus({ 
    4.     
  
  
  
  4.   el: '#html-string', 
    5.     
  
  
  
  5.   slot: ` 
    6.     
  
  
  
  6.     
     
    7.     
  
  
  
  7.       
    This is a html string
     
    8.     
  
  
  
  8.     
 
  •   ` 
  • }) 

    • 插槽位置

    插槽的位置可以選擇4個不同的方向: top, right, left, bottom.

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

       
 
 
 
          
  
  
  
    1. let tour = new Smartour() 
      2.     
  
  
  
    2.  
      3.     
  
  
  
    3. tour.focus({ 
      4.     
  
  
  
    4.   el: '#slot-positions', 
      5.     
  
  
  
    5.   slot: `top`, 
      6.     
  
  
  
    6.   options: { 
      7.     
  
  
  
    7.     slotPosition: 'top' // 默認為 `top` 
      8.     
  
  
  
    8.   } 
      9.     
  
  
  
    9. }) 
      10.

    插槽事件

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

    keyNodes 是內容為一系列 keyNode 的數(shù)組。 屬性 keyNode.el 是一個 css 選擇器，而 keyNode.event 屬性則是對應元素所綁定的事件。

       
 
 
 
          
  
  
  
    1. let tour = new Smartour() 
      2.     
  
  
  
    2.  
      3.     
  
  
  
    3. tour.focus({ 
      4.     
  
  
  
    4.   el: '.slot-events-demo', 
      5.     
  
  
  
    5.   options: { 
      6.     
  
  
  
    6.     slotPosition: 'right' 
      7.     
  
  
  
    7.   }, 
      8.     
  
  
  
    8.   slot: ` 
      9.     
  
  
  
    9.  
      10.     
  
  
  
    10.       Click here to occur an alert event 
      11.     
  
  
  
    11.      
      12.     
  
  
  
    12.  
      13.     
  
  
  
    13.       Click here to occur an alert event 
      14.     
  
  
  
    14.      
      15.     
  
  
  
    15.   `, 
      16.     
  
  
  
    16.   keyNodes: [{ 
      17.     
  
  
  
    17.     el: '.occur-1', 
      18.     
  
  
  
    18.     event: () => { alert('Event!!') } 
      19.     
  
  
  
    19.   }, { 
      20.     
  
  
  
    20.     el: '.occur-2', 
      21.     
  
  
  
    21.     event: () => { alert('Another event!!') } 
      22.     
  
  
  
    22.   }] 
      23.     
  
  
  
    23. }) 
      24.

    Queue

    有的時候頁面需要不止一個導覽。Smartour 允許你把一系列的導覽通過 .queue() 放在一起，然后挨個挨個地展示它們。

    舉個例子：

       
 
 
 
          
  
  
  
    1. let tour = new Smartour() 
      2.     
  
  
  
    2.  
      3.     
  
  
  
    3. tour 
      4.     
  
  
  
    4.   .queue([{ 
      5.     
  
  
  
    5.     el: '.li-1', 
      6.     
  
  
  
    6.     options: { 
      7.     
  
  
  
    7.       layerEvent: tour.next.bind(tour) 
      8.     
  
  
  
    8.     }, 
      9.     
  
  
  
    9.     slot: 'This is the 1st line.' 
      10.     
  
  
  
    10.   }, { 
      11.     
  
  
  
    11.     el: '.li-2', 
      12.     
  
  
  
    12.     options: { 
      13.     
  
  
  
    13.       layerEvent: tour.next.bind(tour) 
      14.     
  
  
  
    14.     }, 
      15.     
  
  
  
    15.     slot: 'This is the 2nd line.' 
      16.     
  
  
  
    16.   }, { 
      17.     
  
  
  
    17.     el: '.li-3', 
      18.     
  
  
  
    18.     options: { 
      19.     
  
  
  
    19.       layerEvent: tour.next.bind(tour) 
      20.     
  
  
  
    20.     }, 
      21.     
  
  
  
    21.     slot: 'This is the 3rd line.' 
      22.     
  
  
  
    22.   }]) 
      23.

    選項

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

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

       
 
 
 
          
  
  
  
    1. { 
      2.     
  
  
  
    2.   prefix: 'smartour', // class 前綴 
      3.     
  
  
  
    3.   padding: 5, // 高亮區(qū)域內邊距 
      4.     
  
  
  
    4.   maskColor: 'rgba(0, 0, 0, .5)', // 帶透明值的遮罩層顏色 
      5.     
  
  
  
    5.   animate: true, // 是否使用動畫 
      6.     
  
  
  
    6.   slotPosition: 'top' // 默認的插槽位置 
      7.     
  
  
  
    7.   layerEvent: smartour.over // 遮罩層點擊事件，默認為結束導覽 
      8.     
  
  
  
    8. } 
      9.

    APIs

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

    • .next()：展示下一個導覽（只能配合 .queue() 使用）。
    • .prev()：展示上一個導覽（只能配合 .queue() 使用）。
    • .over()：結束全部導覽。

    Smartour 的原理

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

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

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


    名稱欄目：Smartour，讓網(wǎng)頁導覽變得更簡單
    本文來源：http://www.dlmjj.cn/article/dpgsijg.html