多页 bootstrap 导览,第二页未显示弹出窗口
Multi-page bootstrap tour, not shown popover in the second page
我使用 yii2 作为后端框架,我想为我的应用制作游览,但是 bootstrap 游览弹出窗口没有显示在第二页上,我为 bootstrap 游览创建了一个资产包并且在布局中注册它,bootstrap 游览在第一页上正常工作,但是当转到另一页时它会出现问题并在下一页的调试中显示:
Bootstrap 游览 'tour' |重定向到 paper/upload
Bootstrap 游览 'tour' |错误重定向循环到 paper/upload
我已经在 chrome 的开发者工具中检查了 window 本地存储,并在转到第二页 window 本地存储时看到它处于正确的步骤:
tour_current_step 值 2,
另一个问题,我应该如何在 yii2 路由器的 bootstrap 游览中设置路径选项的值,我的路径是否正确?例如,网站主页上的第一步是:“”,是否正确,我想如果有人单击弹出窗口的上一个按钮 return 返回上一步。
这是我的 javascript 代码,我在布局文件中注册了这个 javascript 代码:
$(function() {
var $demo, duration, remaining, tour;
$demo = $("#demo");
duration = 5000;
remaining = duration;
tour = new Tour({
onStart: function() {
return $demo.addClass("disabled", true);
},
onEnd: function() {
return $demo.removeClass("disabled", true);
},
debug: true,
steps: [
{
path: "",
element: "#demo",
placement: "bottom",
title: "Welcome to Bootstrap Tour!",
content: "Introduce new users to your product by walking them through it step by step."
}, {
path: "",
element: "#Wordcounter",
placement: "bottom",
title: "Step One",
content: "For translation click on word counter menu item"
}, {
path: "paper/upload",
element: "#myDropzone",
placement: "top",
title: "Step two",
content: "Drag and Drop your file here or click to upload plz wate to complete upload"
}
,
{
path: "paper/upload",
element: "#next",
placement: "bottom",
title: "Step three",
content: "then Click on the Next Bottom",
reflex: true
}, {
path: "paper/show",
element: "#save",
placement: "top",
title: "Step four",
content: "click on save and continue and choose language plan",
duration: 5000
}
]
}).init();
if (tour.ended()) {
$('<div class="alert alert-info alert-dismissable"><button class="close" data-dismiss="alert" aria-hidden="true">×</button>You ended the demo tour. <a href="#" data-demo>Restart the demo tour.</a></div>').prependTo(".content").alert();
}
$(document).on("click", "[data-demo]", function(e) {
e.preventDefault();
if ($(this).hasClass("disabled")) {
return;
}
tour.restart();
return $(".alert").alert("close");
});
});
我在代码上做了很多工作,终于找到了答案,问题出在路径上,我在 URL 管理器中使用了漂亮的 URL,而 bootstrap tour需要关联路径,如果当前页面中的路径与bootstrap tour步骤中的路径不一致,则会进入重定向循环,这是因为bootstrap tour没有办法可以查到,是否需要重定向,这个是bootstrap tour where go to redirect loop
的短代码
if (step.redirect && this._isRedirect(step.host, path, document.location)) {
this._redirect(step, i, path);
if (!this._isJustPathHashDifferent(step.host, path, document.location)) {
return;
}
}
当路径应该从路由器获取时解决这个问题(例如在像 Yii、Laravel、Symfony 和...这样的框架中)bootstrap 游览建议在中使用 onNext 属性步骤并重定向到地址。
但就我而言,我更改了 bootstrap 游览的源代码以找到更好形式的答案,并将上面的代码替换为以下代码:
var current_url = document.URL;
var result = current_url.includes(path);
if(!result){
this._redirect(step, i, path);
if (!this._isJustPathHashDifferent(step.host, path, document.location)) {
return;
}
}
并将重定向代码更改为:
Tour.prototype._redirect = function(step, i, path) {
var href;
if ($.isFunction(step.redirect)) {
return step.redirect.call(this, path);
} else {
href = this._options.domainAddress + path;
// href = {}.toString.call(step.host) === '[object String]' ? "" + step.host + path : path;
this._debug("Redirect to: " + href);
if (this._getState('redirect_to') === ("" + i)) {
this._debug("Error redirection loop to " + path);
this._removeState('redirect_to');
if (step.onRedirectError != null) {
return step.onRedirectError(this);
}
} else {
this._setState('redirect_to', "" + i);
return document.location.href = href;
}
}
};
并在选项中定义一个全局变量,domainAddress,
但我认为这不是更改 bootstrap 游览的源代码的好方法,但它适用于我的情况。
我使用 yii2 作为后端框架,我想为我的应用制作游览,但是 bootstrap 游览弹出窗口没有显示在第二页上,我为 bootstrap 游览创建了一个资产包并且在布局中注册它,bootstrap 游览在第一页上正常工作,但是当转到另一页时它会出现问题并在下一页的调试中显示:
Bootstrap 游览 'tour' |重定向到 paper/upload
Bootstrap 游览 'tour' |错误重定向循环到 paper/upload
我已经在 chrome 的开发者工具中检查了 window 本地存储,并在转到第二页 window 本地存储时看到它处于正确的步骤: tour_current_step 值 2,
另一个问题,我应该如何在 yii2 路由器的 bootstrap 游览中设置路径选项的值,我的路径是否正确?例如,网站主页上的第一步是:“”,是否正确,我想如果有人单击弹出窗口的上一个按钮 return 返回上一步。
这是我的 javascript 代码,我在布局文件中注册了这个 javascript 代码:
$(function() {
var $demo, duration, remaining, tour;
$demo = $("#demo");
duration = 5000;
remaining = duration;
tour = new Tour({
onStart: function() {
return $demo.addClass("disabled", true);
},
onEnd: function() {
return $demo.removeClass("disabled", true);
},
debug: true,
steps: [
{
path: "",
element: "#demo",
placement: "bottom",
title: "Welcome to Bootstrap Tour!",
content: "Introduce new users to your product by walking them through it step by step."
}, {
path: "",
element: "#Wordcounter",
placement: "bottom",
title: "Step One",
content: "For translation click on word counter menu item"
}, {
path: "paper/upload",
element: "#myDropzone",
placement: "top",
title: "Step two",
content: "Drag and Drop your file here or click to upload plz wate to complete upload"
}
,
{
path: "paper/upload",
element: "#next",
placement: "bottom",
title: "Step three",
content: "then Click on the Next Bottom",
reflex: true
}, {
path: "paper/show",
element: "#save",
placement: "top",
title: "Step four",
content: "click on save and continue and choose language plan",
duration: 5000
}
]
}).init();
if (tour.ended()) {
$('<div class="alert alert-info alert-dismissable"><button class="close" data-dismiss="alert" aria-hidden="true">×</button>You ended the demo tour. <a href="#" data-demo>Restart the demo tour.</a></div>').prependTo(".content").alert();
}
$(document).on("click", "[data-demo]", function(e) {
e.preventDefault();
if ($(this).hasClass("disabled")) {
return;
}
tour.restart();
return $(".alert").alert("close");
});
});
我在代码上做了很多工作,终于找到了答案,问题出在路径上,我在 URL 管理器中使用了漂亮的 URL,而 bootstrap tour需要关联路径,如果当前页面中的路径与bootstrap tour步骤中的路径不一致,则会进入重定向循环,这是因为bootstrap tour没有办法可以查到,是否需要重定向,这个是bootstrap tour where go to redirect loop
if (step.redirect && this._isRedirect(step.host, path, document.location)) {
this._redirect(step, i, path);
if (!this._isJustPathHashDifferent(step.host, path, document.location)) {
return;
}
}
当路径应该从路由器获取时解决这个问题(例如在像 Yii、Laravel、Symfony 和...这样的框架中)bootstrap 游览建议在中使用 onNext 属性步骤并重定向到地址。
但就我而言,我更改了 bootstrap 游览的源代码以找到更好形式的答案,并将上面的代码替换为以下代码:
var current_url = document.URL;
var result = current_url.includes(path);
if(!result){
this._redirect(step, i, path);
if (!this._isJustPathHashDifferent(step.host, path, document.location)) {
return;
}
}
并将重定向代码更改为:
Tour.prototype._redirect = function(step, i, path) {
var href;
if ($.isFunction(step.redirect)) {
return step.redirect.call(this, path);
} else {
href = this._options.domainAddress + path;
// href = {}.toString.call(step.host) === '[object String]' ? "" + step.host + path : path;
this._debug("Redirect to: " + href);
if (this._getState('redirect_to') === ("" + i)) {
this._debug("Error redirection loop to " + path);
this._removeState('redirect_to');
if (step.onRedirectError != null) {
return step.onRedirectError(this);
}
} else {
this._setState('redirect_to', "" + i);
return document.location.href = href;
}
}
};
并在选项中定义一个全局变量,domainAddress, 但我认为这不是更改 bootstrap 游览的源代码的好方法,但它适用于我的情况。