Smartour，让网页导览变得更简单

在遇到网页内容有着较大调整的时候，往往需要一个导览功能去告诉用户，某某功能已经调整到另外一个位置。比较常规的办法是添加一个蒙层，高亮显示被调整的区域，然后通过文字介绍去完成引导。我们把这个功能称为“导览”，而 Smartour 则把这个导览的功能抽离出来，提供了一个开箱即用的解决方案。

创新互联公司致力于网站建设,网站制作设计,营销网页按需定制制作,成都外贸网站建设,企业网站建设,小程序定制开发,网站SEO优化,网站设计制作案例丰富,是成都做网站公司和建站公司,欢迎咨询。

项目地址： 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 的数组。 属性 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 是一个构建函数，它接收一个 options 参数去覆盖其默认选项。

    让我们看看它的默认选项是什么样子的：

       
 
 
 
          
  
  
  
    1. { 
      2.     
  
  
  
    2.   prefix: 'smartour', // class 前缀 
      3.     
  
  
  
    3.   padding: 5, // 高亮区域内边距 
      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 专门用于控制导览的展示。

    Smartour 的原理

    Smartour 通过 element.getBoundingClientRect() api 来获取目标元素的宽高和位置信息，然后放置一个带着 box-shadow 样式的元素在其之上作为高亮区域。

    由于点击事件无法再 box-shadow 的区域里触发，所以 Smartour 还放置了一个全屏透明的遮罩层用于绑定 layerEvent 事件。

    高亮区域和插槽都被设置为 absolute。当页面滚动时，document.documentElement.scrollTop 或者 document.documentElement.scrollLeft 的值就会变化，然后 Smartour 会实时修正它的位置信息。

    当前名称：Smartour，让网页导览变得更简单
    文章源于：http://www.csdahua.cn/qtweb/news48/303898.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    微信小程序知识

    同城分类信息

    成都ssl证书申请　　 　成都代办注册公司　　 　温江做网站公司　　 　成都响应式网站　　 　企业网站建设　　 　四川电信机房托管　　 　德阳柴油发电机组　　 　盐亭做网站　　 　创新互联　　 　温江做网站　　 　cdsyaren.com　　 　西信服务器托管　　 　成都门户网站建设设计方案　　 　成都网站设计　　 　雕琢时光　　 　成都标识标牌设计制作　　 　西信服务器托管　　 　成都网站建设　　 　网络整合营销　　 　成都网站推广