1. 首页
  2. 插件控件
  3. Tour引导插件

Tour引导插件（第三方bootstrap插件，提供了单独使用的文件）

BootStrap Tour介绍 运行Tour

BootStrap Tour是基于BootStrap的一个引导插件，调用方便。如果在不需要BootStrap的情况下调用，需要引入 bootstrap-tour.js 和 bootstrap-tour.css。

添加依赖文件

如果当前正在使用BootStrap框架，请先引入bootstrap-tour.css 和 bootstrap-tour.js：

  1. <link href="bootstrap.min.css" rel="stylesheet">
  2. <link href="bootstrap-tour.css" rel="stylesheet">
  3. <script src="jquery.min.js"></script>
  4. <script src="bootstrap.min.js"></script>
  5. <script src="bootstrap-tour.js"></script>

如果单独使用，需引入 bootstrap-tour-standalone.css 和 bootstrap-tour-standalone.js

  1. <link href="bootstrap-tour-standalone.css" rel="stylesheet">
  4. <script src="jquery.min.js"></script>
  5. <script src="bootstrap-tour-standalone.js"></script>

配置Tour

  1. // 配置Tour
  2. var tour = new Tour({
  3. storage: false,// 自定义不存储
  4. steps: [
  5. {
  6. element: "#my-element",// 目标元素id或class
  7. title: "Title of my step",// 步骤标题
  8. content: "Content of my step"// 步骤内容介绍
  9. },
  10. {
  11. element: "#my-other-element",
  12. title: "Title of my step",
  13. content: "Content of my step"
  14. }
  15. ]});
  17. // 初始化Tour
  18. tour.init();
  20. // 运行Tour
  21. tour.start();

全部参数说明

  1. var tour = new Tour({
  2. name: "tour"// 同一页面和应用程序中初始化具有不同名称的多个引导 String
  3. steps: []// 引导的个数 Array
  4. container: "body"// 引导窗口附加到特定元素上 String
  5. smartPlacement: true// 默认情况下，它会通过为展示位置指定自动每次动态重定向弹出框 Boolean
  6. autoscroll: true// 引导窗口不在视图中时，自动滚动窗口 Boolean
  7. keyboard: true// 设置左右箭头导航 Boolean
  8. storage: window.localStorage// 存储，可以设置false以禁用存储持久性（浏览从每次加载网页时开始）Object
  9. debug: false// 错误报告 Boolean
  10. backdrop: false// 是否显示透明背景 Boolean
  11. backdropContainer: 'body'// 显示背景的HTML元素 String (jQuery selector)
  12. backdropPadding: 0// 高亮文字的填充，Number|Object(numbers|top|right|bottom|left)
  13. redirect: true// 自定义重定向函数 Boolean|Function
  14. orphan: false// 允许显示步骤，不管其是否设置 Boolean|String|function
  15. duration: false// 设置步骤的到期时间；当前步骤到期时，将自动显示下一步；该值以毫秒为单位指定 Boolean|Number
  16. delay: false// 显示和隐藏步骤的延迟 Boolean|Number
  17. basePath: ""// 指定每个步骤的path选项前面的默认基本路径 String
  18. template: ""// 引导的模板 String|Function
  19. afterGetState: function (key, value) {}
  20. afterSetState: function (key, value) {}
  21. afterRemoveState: function (key, value) {}
  22. onStart: function (tour) {}// 引导开始时执行
  23. onEnd: function (tour) {}// 引导结束时执行
  24. onShow: function (tour) {}// 显示每个步骤前执行
  25. onShown: function (tour) {}// 显示每个步骤后执行
  26. onHide: function (tour) {}// 隐藏每个步骤前执行
  27. onHidden: function (tour) {}// 隐藏每个步骤后执行
  28. onNext: function (tour) {}// 执行下一步
  29. onPrev: function (tour) {}// 执行上一步
  30. onPause: function (tour, duration) {}// 调用暂停时执行的函数； 第二个参数指剩余持续时间
  31. onResume: function (tour, duration) {}// 恢复时执行
  32. onRedirectError: function (tour) {}// 当存在重定向错误时执行
  33. });