插件官网: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.css
and 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();
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) {}
});
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) {}
});
方法 | 描述 |
---|---|
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() | 在覆盖元素上触发重绘。对于动态大小的游览目标很有用。 |