bootstrap-tour（用户引导插件）

插件官网：http://bootstraptour.com/

插件包下载：点我下载

一、使用案例

如果您使用的是 Bootstrap，请包含bootstrap-tour.min.css和bootstrap-tour.min.js：

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

否则，只需包含bootstrap-tour-standalone.min.cssand bootstrap-tour-standalone.min.js：

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

案例：

// Instance the tour
var tour = new Tour({
  steps: [
  {
    element: "#my-element",
    title: "Title of my step",
    content: "Content of my step"
  },
  {
    element: "#my-other-element",
    title: "Title of my step",
    content: "Content of my step"
  }
]});

// Initialize the tour
tour.init();

// Start the tour
tour.start();

二、文档说明

1、全局参数

var tour = new Tour({
  name: "tour",
  //name的值在整个网站中要唯一
  steps: [],
  container: "body",
  //将步骤弹出框附加到特定元素。
  smartPlacement: true,
  keyboard: true,
  storage: window.localStorage,//您要使用的存储系统。
  //可以是对象 window.localStorage、window.sessionStorage 或您自己的对象。
  // 您可以将此选项设置为 false禁用存储持久性（每次加载页面时游览从头开始）。
  debug: false,
  backdrop: false,
​​  ​​​​​//在弹出框及其元素后面显示黑色背景，突出显示当前步骤。
  backdropContainer: 'body',
  backdropPadding: 0,
  redirect: true,
  orphan: false,
  duration: false,
  delay: false,
  basePath: "",
  template: "<div class='popover tour'>
    <div class='arrow'></div>
    <h3 class='popover-title'></h3>
    <div class='popover-content'></div>
    <div class='popover-navigation'>
        <button class='btn btn-default' data-role='prev'>« 上一步</button>
        <span data-role='separator'>|</span>
        <button class='btn btn-default' data-role='next'>下一步 »</button>
        <button class='btn btn-default' data-role='end'>跳过</button>
    </div>
  </div>",
  afterGetState: function (key, value) {},
  afterSetState: function (key, value) {},
  afterRemoveState: function (key, value) {},
  onStart: function (tour) {},
  onEnd: function (tour) {},
  onShow: function (tour) {},
  onShown: function (tour) {},
  onHide: function (tour) {},
  onHidden: function (tour) {},
  onNext: function (tour) {},
  onPrev: function (tour) {},
  onPause: function (tour, duration) {},
  onResume: function (tour, duration) {},
  onRedirectError: function (tour) {}
});

2、步骤参数

步骤选项

tour.addStep({
  path: "",
  //显示该步骤的页面的路径。这使您可以构建跨越多个页面的游览！
  host: "",
  element: "",
  //jQuery 选择器，在其上显示步骤的内容。
  placement: "right",
  //如何定位弹出框。可能的选择： 'top', 'bottom', 'left', 'right', 'auto'
  smartPlacement: true,
  title: "",//步骤标题
  content: "",//步骤内容
  next: 0,
  prev: 0,
  animation: true,
  container: "body",
  backdrop: false,
  backdropContainer: 'body',
  backdropPadding: false,
  redirect: true,
  reflex: false,
  orphan: false,
  template: "",
  onShow: function (tour) {},
  onShown: function (tour) {},
  onHide: function (tour) {},
  onHidden: function (tour) {},
  onNext: function (tour) {},
  onPrev: function (tour) {},
  onPause: function (tour) {},
  onResume: function (tour) {},
  onRedirectError: function (tour) {}
});

2、常用方法

方法	描述
addSteps([])	向导览添加多个步骤。传递一个对象数组。
addStep({})	向导览添加一个步骤。传递一个对象。
init()	初始化游览。您必须在调用 start 之前执行此操作。
start(true)	开始游览。通过true强制启动。
restart()	游览结束后重新开始游览。
end()	提前结束游览。
next()	跳到下一步。
prev()	返回上一步。
goTo(i) /goto(i)	跳到特定步骤。i作为游览中步骤的索引传递（从 0 开始）。
pause()	暂停持续时间计时器。仅当游览或当前步骤具有持续时间时才有效。
resume()	恢复持续时间计时器。仅当游览或当前步骤具有持续时间时才有效。
ended()	验证游览是否结束。返回布尔值。
getStep(i)	获取步骤对象。i作为游览中步骤的索引传递（从 0 开始）。
getCurrentStep()	获取当前步骤的索引。
setCurrentStep(i)	覆盖当前步骤。i 作为游览中步骤的索引传递（从 0 开始）。
redraw()	在覆盖元素上触发重绘。对于动态大小的游览目标很有用。