Bootstrap Tour不记得我离开的地方
cey*_*yer 11 javascript twitter-bootstrap bootstrap-tour
一旦到达第二页,我就无法在多页巡视中启动Bootstrap Tour.
我有一个点击事件的旅游开始,并localStorage设置为false.通过点击活动,游览开始很好,但是当我进入游览的第二步并加载新页面时,游览不会从它停止的地方开始.
如何在这个新页面上继续从第二步开始巡演？我知道我需要重新初始化巡视,但我显然没有正确地做到这一点.
$(document).ready(function () {
// Instance the tour
var tour = new Tour({
name: "CiteTour",
steps: [{
element: "",
title: "#1",
content: "You can find help with formatting citations on the Guide page. Click 'Next' to go there now.",
placement: ""
}, {
element: "#CiteTour2",
title: "#2 - Citation Resources",
content: "There are several options for getting help with formatting citations. Once on the Guide page, look for the box labeled 'Citation Help.'",
placement: "right",
path: "/newpath",
onNext: function (tour) {
tour.init();
tour.restart();
}
}, {
element: "#CiteTour3",
title: "#3",
content: "This site can help format your research paper and references in APA, MLA, and the other major citation formats.",
placement: "right",
}, {
element: "#AskTour1",
title: "#4 - Ask-a-Librarian",
content: "If you still have questions about citations or citation format, feel free to contact the librarians. Good luck!",
placement: "left",
}],
storage: false,
});
// Initialize the tour
tour.init();
$('#CiteTour-go').on('click', function () {
// Start the tour
tour.start();
});
});
Kyl*_*Mit 31
问题和解释
首先,您必须确保storage: window.localStorage使用Storage API.这是默认的游览选项,因此您所要做的就是不要像以前那样将其覆盖为false.这样做是允许Bootstrap Tour在同一域内的多个页面上保留当前步骤信息.
想要证明吗？ - 打开你的开发工具,看看:
其次,如果要path为任何步骤指定选项,则应为所有步骤指定该选项.当单页浏览开始时,它不需要担心导航到不同的页面,但是一旦你移动到新页面,如果你没有指定前面步骤的路径,bootstrap tour无法进行知道在哪里导航回去.
此外,您需要使用绝对路径引用,通过使用单个斜杠预先设置url,使其相对于根目录.如果使用相对路径,则在遍历页面/步骤时将更改路径. 有关详细信息,请参阅无限页面刷新问题底部的我的部分
第三,只要您定义了tour对象并init对其进行了测量,游览就会在新页面上自动拾取.
让我们来看看一个简化版本是什么init()呢:
Tour.prototype.init = function(force) {
// other code omitted for brevity
if (this._current !== null) {
this.showStep(this._current);
}
};
因此,一旦您初始化了巡视路线,只要它注意到巡视已经开始并且尚未结束(即它具有当前步骤),它将自动启动该步骤.因此,您无需onNext在第二步中点击事件进行初始化.
多页游览概念证明
的script.js
$(function() {
// define tour
var tour = new Tour({
steps: [{
path: "/index.html",
element: "#my-element",
title: "Title of my step",
content: "Content of my step"
}, {
path: "/newPage.html",
element: "#my-other-element",
title: "Title of my step",
content: "Content of my step"
}]
});
// init tour
tour.init();
// start tour
$('#start-tour').click(function() {
tour.restart();
});
});
index.html的:
<!DOCTYPE html>
<html>
<head>
<title>Multipage Bootstrap Tour - Page 1</title>
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="bootstrap-tour.min.css">
</head>
<body>
<div class="container">
<h1>First Page</h1>
<button class="btn btn-lg btn-primary" id="start-tour">
Start Tour
</button><br/><br/>
<span id="my-element">
My First Element
</span>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tour.min.js"></script>
<script src="script.js"></script>
</body>
</html>
newPage.html
<!DOCTYPE html>
<html>
<head>
<title>Multipage Bootstrap Tour - Page 2</title>
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="bootstrap-tour.min.css">
</head>
<body>
<div class="container">
<h1>New Page</h1>
<span id="my-other-element">
My Second Elemennt
</span>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tour.min.js"></script>
<script src="script.js"></script>
</body>
</html>
你带来了以下图书馆的地方:
无限页面刷新问题
在许多配置中,您将进入一个页面无限刷新的循环,不断尝试解析当前步骤的路径.下面介绍为什么会出现此问题以及如何解决此问题.
Bootstrap Tour如何进入下一步？
点击Next按钮后,游览将调用下一步showStep(i)
这是一个简化版本showStep:
Tour.prototype.showStep = function (i) {
// other code omitted for brevity
// get step path
path = tour._options.basePath + step.path;
// get current path - join location and hash
current_path = [document.location.pathname, document.location.hash].join('');
// determine if we need to redirect and do so
if (_this._isRedirect(path, current_path)) {
_this._redirect(step, path);
return;
}
};
因此,如果文档中的当前路径与下一步的路径不同,则tour将自动重定向到下一步.
这是重定向的简化形式,它只考虑字符串值:
我省略了基于正则表达式的路径,尽管Bootstrap Tour也支持它们
Tour.prototype._isRedirect = function(path, currentPath) {
var checkPath = path.replace(/\?.*$/, '').replace(/\/?$/, '');
var checkCurrent = currentPath.replace(/\/?$/, '');
return (checkPath !== checkCurrent);
};
Tour.prototype._redirect = function(step, path) {
this._debug("Redirect to " + path);
return document.location.href = path;
};
当任何页面加载时,它不确定Bootstrap Tour是否重定向它,或者您只是回来并试图从您离开的地方开始游览.
因此,在初始化游览时的任何页面上:
- 它将根据本地存储中的值启动当前步骤.
- 当当前步骤加载时,它将确认该步骤的路径与当前URL相同
- 如果没有,它将重定向到步骤路径并重新开始步骤1
换句话说,它知道如何到达下一步需要去的地方,但是一旦它到达那里就无法确认是否是这种情况.以这种情况为例,其步骤如下:
var step = {
path: "index.html",
element: "#my-element",
title: "Title of my step",
content: "Content of my step"
}
它可以被重定向到相对引用,但是当页面再次加载并检查它是否已经加载到正确的地址时,会发生这种情况:
"KyleMit",你可能会抗议," 难道不能只是想出我想要的东西吗？ "
-没有!
如果您依赖相对路径进行重定向,当它加载一个步骤时,它无法保证您实际上已到达该步骤并且它将尝试再次重定向您.
那是因为,在网址中,"index.html" !== "\index.html".他们是两条不同的道路!一个保证在域根,而另一个可以在任何地方.想象一下,你有一些像这样的嵌套视图:
- 查看
- 共享
- 的index.html
- newPage.html
- 人
- 的index.html
- newPage.html
- 共享
在页面之间导航时,如果你只是告诉它正确的页面名称,那么如何引导程序知道它是否到达了正确的目的地.
这让我们解决了这个问题:
绝对使用绝对URLS
提示:
debug:true在创建游览时,可以更好地了解传入的内容,这将记录每个重定向:
| 归档时间： |
|
| 查看次数： |
7798 次 |
| 最近记录： |