当前位置:主页 > JavsScript库 > 其它 >

功能丰富的JavaScript用户分步指南 - webtour.js
栏目分类:其它   发布日期:2021-09-03   浏览次数:

webtour.js 是一个功能丰富、用户友好、完全响应的 Web 导览 JavaScript 库。

特征:

显示页面上各种元素的分步指南。

突出显示元素以吸引用户的注意力。

自动将页面滚动到当前步骤。

允许用户像幻灯片一样在步骤之间导航。

支持动态创建的内容。

使用:

1. 将 webtour.js JavaScript 库的文件添加到页面。

<link rel="stylesheet" href="dist/webtour.min.css" /> 
<script src="dist/webtour.min.js"></script>

2. 定义元素的步骤如下:

  • element: 目标元素

  • title: 步骤标题

  • content: 步骤内容

  • placement: top, top-start, top-end, left, left-start, left-end, right, right-start, right-end, bottom, bottom-start, or bottom-end

var steps = [
    {
      content: `Splash Step`,
      width: '500px'
    },
    {
      element: '#title',
      title: '步骤 1',
      content: '步骤内容 1',
      placement: 'bottom-start',
    },
    {
      element: '#features',
      title: '步骤 2',
      placement: 'top-start',
    },
    {
      element: '#desc',
      title: '步骤 3',
      placement: 'left-start',
    },{
      element: '#scroll',
      title: '步骤 4',
      placement: 'bottom-start',
    },
    {
      content: `End Step`,
      width: '500px'
}]

3. 您还可以使用onNext和onPrevisous函数将内容动态插入到步骤中:

{
  element: '#dynamic',
  title: 'Can target dynamically created element.',
  placement: 'right-start',
  onNext: function(){
    wt.isPaused = true;
    var dynamicTarget = document.createElement('div');
    dynamicTarget.id = 'dynamictarget';   
    dynamicTarget.style.position = 'absolute';
    dynamicTarget.style.height = '300px';
    dynamicTarget.style.width = '300px';
    dynamicTarget.style.top = 'calc(50% - 150px)';
    dynamicTarget.style.left = 'calc(50% - 150px)';
    dynamicTarget.style.padding = '10px';
    dynamicTarget.style.fontFamily = 'Open Sans, sans-serif';
    dynamicTarget.style.background = 'rgb(124, 209, 249)';
    //dynamicTarget.style.transform = 'translate(-50%, -50%)';
    document.body.appendChild(dynamicTarget);
    //make sure target is visible
    setTimeout(function(){
        wt.moveNext();
    }, 500)       
  }
},
{
  element: '#dynamictarget',
  title: '我是动态创建的元素!',
  placement: 'bottom-start',
  onNext: function(){
    var dynamicTarget = document.querySelector('#dynamictarget');
    dynamicTarget.remove();                    
  }                
},

4. 初始化 webtour JavaScript 库。

var wt = new WebTour();
wt.setSteps(steps);

5. 开始游览。

wt.start();


官方网站:https://github.com/votch18/webtour.js

相关热词: webtour.js分步指南

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库