Question

我有一个使用Drupal 8和Bootstrap 3构建的网站。当用户访问该网站时，Tour会自动启动。完成Tour后，会在访问者的浏览器中放置一个Cookie，以便在用户重新加载页面时{}}}无法启动。

我的问题：

我在左侧菜单Tour上创建了一个按钮，以便用户手动访问Commencer la visite。

每次手动重启Tour时，都会不时出现错误。必须在不同的页面上多次重启才能看到错误。

如何解决这个问题？

以下是我在Tour文件末尾添加的代码：

bs-tour.js

这是我的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');
        });

当我启动(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);时，背景为黑色：

Answer 1

我不确定，但是当我启动访问时，我认为它完成了'菜单权限'。

我调查了你的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>",
        });

Bootstrap＆＃34; Tour＆＃34;我启动时的错误

1 个答案: