新手教程指引插件tourguide.js

新手教程指引插件tourguide.js源码下载

看看谁在用

查看文件结构

文件大小:0.13M

资源分类: 插件-其它前端代码

更新时间: 2021-06-30

tourguide.js是一个JavaScript库,帮助您创建一个交互式、循序渐进的新手指导教程,访问者通过应用上的新特性和突出显示的内容。

定义HTML
<h1 data-tour="step: 1; title: 提示标题; image: 1.jpg; content:提示内容">Tour example</h1>
开始
myTour.start();
也可以加载Json数据当做步骤
[
  {
    "selector": "Select 1",
    "step": 1,
    "title": "Step 1",
    "content": "Step 1 content",
    "image": "1.jpg"
  },
  {
    "selector": "Select 2",
    "step": 2,
    "title": "Step 2",
    "content": "Step 2 content",
    "image": "2.jpg"
  },
  {
    "selector": "Select 3",
    "step": 3,
    "title": "Step 3",
    "content": "Step 3 content",
    "image": "3.jpg"
  }
  // ... 
]
所有的配置参数
var myTour = new Tourguide({
    root: "body",
    selector: "[data-tour]",
    animationspeed: 300,
    padding: 5,
    steps: null,
    src: null,
    restoreinitialposition: true,
    preloadimages: false,
    request: {
      "options": {
        "mode": "cors",
        "cache": "no-cache"
      },
      "headers": {
        "Content-Type": "application/json"
      }
    },
});
回调方法
var myTour = new Tourguide({
    onStart: function(options){...},
    onStop: function(options){...},
    onComplete: function(){...},
    onStep: function(currentstep, type){...},
    onAction: function(currentstep, e){...}
});
API方法
// starts the tour
myTour.start();
myTour.start(2); // starts at step 2

// stops the tour
myTour.stop();

// goes to the next step
myTour.next();

// backs to the previous step
myTour.previous();

// goes to a specific step
myTour.go(2);

新手教程指引插件tourguide.js

正在加载文件目录...

也许你还喜欢

  1. 分步骤教程引导插件Webtour.js
  2. 汽车销量表格table代码实例
  3. CSS可编辑的留言板
  4. jquery.wizzy.js下一步向导插件
  5. 纯css计算器代码可计算
  6. echarts江西省地图网页代码
React列表搜索过滤特效
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2
  • 背景样式编辑器|按钮样式编辑器|背景动效编辑器|图片布局编辑器