我有一个使用 Drupal 8
和 Bootstrap 3
构建的网站。当用户访问该网站时,游览
会自动开始。当 Tour
完成时,将在访问者的浏览器中放置一个 cookie,以便当用户重新加载页面时 Tour
不会启动。
我的问题:
我在左侧菜单上创建了一个按钮Commencer la Visite
,以便用户手动访问Tour
。
每次我手动重新启动Tour
时,都会不时出现错误。必须在不同页面上重新启动几次才能看到该错误。
如何纠正这个问题?
这是我在 bs-tour.js
文件末尾添加的代码:
// Restart the tour
var startTour = $('#bs-tour-restart');
startTour.click(function (event) {
event.preventDefault();
var tourObject = drupalSettings.bs_tour.currentTour;
if (tourObject && tourObject._options.steps.length) {
tourObject.start(true);
}
});
// Close collapse navigation
$('#bs-tour-restart').click(function () {
$('#navbar-collapse-first, #navbar-collapse-second').collapse('hide');
});
这是我的 bs-tour.js 文件:
(function ($, _, Drupal, drupalSettings) {
'use strict';
Drupal.behaviors.bsTour = {
attach: function (context, settings) {
$(window).on('load', function (event) {
try
{
var tourOptions = $(drupalSettings.bs_tour.tour)[0];
var tips = tourOptions.steps;
var keyboard = tourOptions.keyboard;
var debug = tourOptions.debug;
var steps = [];
for (var i = 0; i < tips.length; i++) {
if ($(tips[i].element).length > 0) {
tips[i].backdropPadding.top = parseInt(tips[i].backdropPadding.top);
tips[i].backdropPadding.right = parseInt(tips[i].backdropPadding.right);
tips[i].backdropPadding.bottom = parseInt(tips[i].backdropPadding.bottom);
tips[i].backdropPadding.left = parseInt(tips[i].backdropPadding.left);
switch (tips[i].backdrop) {
case "0":
tips[i].backdrop = false;
break;
case "1":
tips[i].backdrop = true;
break;
}
steps.push(tips[i]);
}
}
if (steps.length) {
var tour = new Tour({
debug: debug,
keyboard: keyboard,
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'>« " + Drupal.t('Prev') + "</button>\
<span data-role='separator'>|</span>\
<button class='btn btn-default' data-role='next'>" + Drupal.t('Next') + " »</button>\
<button class='btn btn-default' data-role='end'>" + Drupal.t('Skip tour') + "</button>\
</div>\
</div>",
});
// Add steps to the tour
tour.addSteps(steps);
// Initialize the tour
tour.init();
// Start the tour
tour.start();
// Restart the tour
var startTour = $('#bs-tour-restart');
startTour.click(function (event) {
event.preventDefault();
var tourObject = drupalSettings.bs_tour.currentTour;
if (tourObject && tourObject._options.steps.length) {
tourObject.start(true);
}
});
// Close collapse navigation
$('#bs-tour-restart').click(function () {
$('#navbar-collapse-first, #navbar-collapse-second').collapse('hide');
});
// Add tour object to drupalSettings to allow manipulating tour from other modules.
// Example: drupalSettings.bs_tour.currentTour.end();
drupalSettings.bs_tour.currentTour = tour;
}
} catch (e) {
// catch any fitvids errors
window.console && console.warn('Bootstrap tour stopped with the following exception');
window.console && console.error(e);
}
});
}
};
})(window.jQuery, window._, window.Drupal, window.drupalSettings);
当我开始游览
时,背景是黑色的:
最佳答案
我不确定,但当我启动访问时,我认为它在“右侧菜单”中结束。
我查看了你的js,发现还有其他步骤,正好是8个。 一件事是您应该实现一个针对打开的步骤的滚动功能。
所以我滚动到底部,然后当我看到下一个按钮为灰色时,我完成了导览,导览已完成,并且我无法重现您的问题。
我认为您应该使用“onShown”选项 ( http://bootstraptour.com/api/ ) 使窗口滚动到目标元素。
最后(我认为)您的问题只是因为旅行尚未结束而引起的?
<小时/>也许你可以用这样的代码进行测试,它没有经过测试,但它是类似的。
var tour = new Tour({
debug: debug,
onShown: function(tour){
var target = tour._options.steps[tour.getCurrentStep()].element;
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
},
keyboard: keyboard,
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'>« " + Drupal.t('Prev') + "</button>\
<span data-role='separator'>|</span>\
<button class='btn btn-default' data-role='next'>" + Drupal.t('Next') + " »</button>\
<button class='btn btn-default' data-role='end'>" + Drupal.t('Skip tour') + "</button>\
</div>\
</div>",
});
关于javascript - 启动时出现 Bootstrap "Tour"bug,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48406273/