文章/答案/技术大牛

发布

社区首页 >问答首页 >如何创建一个按钮来启动“自助旅行”？

问如何创建一个按钮来启动“自助旅行”？
EN

Stack Overflow用户

提问于 2018-01-18 03:51:33

回答 1查看 593关注 0票数 1

我在我的网站"Drupal 8“上安装了我的下一个模块"D8:引导旅游”，它使用的主题是“引导3”。

巡演

http://bootstraptour.com/api/

下面是该模块的bs.bs文件的内容：

(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();

            // 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);

访问在第一次访问网站时自动开始。我的问题是，当用户单击“结束访问”时，重新启动访问的唯一方法是从浏览器中删除cookie。此模块没有手动启动访问的按钮。

我用以下代码在Drupal中创建了一个自定义块：

<button class="btn btn-success btn-sm" data-target="#start"><i class="fa fa-compass fa-lg"></i> Commencer la visite</button>

我在子主题的js文件夹中创建了一个文件tour.js：

/**
 * @file
 * Bootstrap Tour.
 */

 var tourObject = drupalSettings.bs_tour.currentTour;
 if (tourObject && tourObject._options.steps.length) {
   tourObject.start();
 }

我修改了子主题的bootstrap_subtheme_front_office.libraries.yml文件，如下所示：

global-styling:
  css:
    theme:
      fonts/font-awesome/css/font-awesome.css: {}
#      bootstrap/dist/css/bootstrap.css: {}
#      css/bootstrap-cosmo.css: {}
      css/style.css: {}
#      css/style-noel.css: {}
#      css/style-nouvel-an.css: {}

bootstrap-scripts:
  js:
    bootstrap/js/affix.js: {}
    bootstrap/js/alert.js: {}
    bootstrap/js/button.js: {}
    bootstrap/js/carousel.js: {}
    bootstrap/js/collapse.js: {}
#    bootstrap/js/dropdown.js: {}
    bootstrap/js/modal.js: {}
    bootstrap/js/tooltip.js: {}
    bootstrap/js/popover.js: {}
    bootstrap/js/scrollspy.js: {}
    bootstrap/js/tab.js: {}
    bootstrap/js/transition.js: {}
    js/tour.js: {}

我清理了缓存，但是按钮不工作。这是我网站的页面，按钮在左边的菜单上。

我找到了解决方案:

我将模块的文件“bs-trac.js”复制到子主题的js文件夹中，并在其中插入了以下代码：

    $('#bs-tour-restart').click(function () {
        // Restart the tour
        tour.restart();
    });

bs文件现在看起来如下所示：

(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();

            $('#bs-tour-restart').click(function () {
                // Restart the tour
                tour.restart();
            });

            // 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);

我用以下代码创建了一个自定义块：

<button class="btn btn-success btn-sm" id="bs-tour-restart"><i class="fa fa-compass fa-lg"></i> Commencer la visite</button>

我不知道这是否是一个好的做法，但启动旅游的按钮有效;-)

drupal-8

bootstrap-tour

javascript

css

twitter-bootstrap

回答 1

Stack Overflow用户

发布于 2018-01-18 14:59:39

我认为您需要首先使用一些javascript来删除/到期 cookie，然后再开始巡演。

function eraseCookie(name) {   
  document.cookie = name+'=; Max-Age=-99999999;';  
}

更新:如果您收到"not a function“错误，请尝试将您的代码包装在：

$(document).ready(function() { [code here] });

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48313564

复制

相似问题

问如何创建一个按钮来启动“自助旅行”？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建一个按钮来启动“自助旅行”？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建一个按钮来启动“自助旅行”？
EN