[英]How to create a button to start “Bootstrap Tour”?
我在站點“ Drupal 8”上安裝了下一個模塊“ D8:Bootstrap Tour”,其主題為“ Bootstrap 3”。
https://www.drupal.org/project/bs_tour
這是該模塊的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();
// 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-tour.js”復制到子主題的文件夾js中,並將以下代碼插入其中:
$('#bs-tour-restart').click(function () {
// Restart the tour
tour.restart();
});
現在,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();
$('#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>
我不知道這是否是一個好習慣,但是啟動游覽的按鈕有效;-)
我認為您首先需要使用一些JavaScript 刪除/終止 Cookie,然后再次開始瀏覽。
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
更新:如果遇到“不是函數”錯誤,請嘗試將代碼包裝在:
$(document).ready(function() { [code here] });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.