- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在我的网站“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 中创建了一个自定义 block :
<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);
我使用以下代码创建了一个自定义 block :
<button class="btn btn-success btn-sm" id="bs-tour-restart"><i class="fa fa-compass fa-lg"></i> Commencer la visite</button>
我不知道这是否是一个好的做法,但是开始游览的按钮有效;-)
最佳答案
我认为你需要delete/expire首先使用一些 javascript 来处理 cookie,然后再次开始游览。
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
<小时/>
更新:如果您收到“不是函数”错误,请尝试将代码包装在:
$(document).ready(function() { [code here] });
关于javascript - 如何创建一个启动按钮 "Bootstrap Tour"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48313564/
go版本go1.12.9 darwin/amd64 安装 golang.org/x/tour 软件包后,我运行命令 tour 并收到错误: Couldn't find tour files: coul
使用 bootstrap-tour 插件 ( http://bootstraptour.com/ ),我想在除最后一步之外的每个步骤上禁用或隐藏默认的“End Tour”按钮。 我尝试修改步骤模板以完
我正在尝试使用 Bootstrap 主题在 Wordpress 网站上实现 Bootstrap Tour,但到目前为止,每次我尝试链接样式表 (CSS) 和 JavaScrit 时,它都不起作用。该页
正如“A Tour of Go”的 Crawl 示例中提到的命中,我修改了 Crawl 函数,只是想知道为什么“go Crawl”无法生成另一个线程,因为只找到一个 url 被打印出来。 我的修改有问
HTML: button JS: var tour = new Tour({ steps: [{ element: "#enrol-btn1", title: "Exam Enrolm
我正在尝试使用 vue-tour,按照指南中的确切步骤我收到了这个错误 https://github.com/pulsardev/vue-tour 步骤 在 main.js 上添加 vue-tour
我正在尝试使用DFS制作程序骑士之旅,但我无法解决这个程序..因为我总是有这样的消息错误 线程“AWT-EventQueue-0”中的异常java.lang.ArrayIndexOutOfBounds
我真的可以使用帮助来关闭我正在构建的网页的 Bootstrap Tour 插件的“自动启动”功能。这次旅行本身效果很好。它按照预期从一步跳到另一步。但是,当用户第一次查看页面时,导览会自行开始。用户可
我正在使用 Bootstrap 游览,但问题是我只需要游览/突出显示不正确的字段。 Bootstrap 游览的问题在于硬编码所有元素 id 或类名。我遇到的表单错误是基于不正确的字段。因此,我无法对字
我们可以通过获取当前步骤元素 var step = tour._options.steps[tour.getCurrentStep()]; var element=$(step.element); 与
我一直在尝试使用“Bootstrap Tour”在我的网站上安装一个导览,我对 Javascript 和一般编码还很陌生,而且我已经做了一整天。我想我会来这里问更有经验的人。 hi1 有时会起作用,但
我对 Bootstrap tour 有疑问. 我的问题 当我从一个页面重定向到另一个页面时,init 函数将被调用,但不会自动继续浏览。所以 Bootstrap 之旅不会显示。该页面还包含一个 AJA
我在这里发帖是因为我无法在 Boostrap Tour 的官方文档或此处的任何其他主题中找到解决我的问题的方法。 这是我的问题:我有一个页面,我想在其中初始化两个游览,以便让我的用户选择从哪一个开始。
我通过我的网站进行了游览。我希望用户在结束游览后可以通过单击按钮手动开始游览。 按钮: Start Tour Bootstrap 游览脚本。 var tour = new Tour(); tour
我正在尝试突出显示表格行。即使有了针对 z-indexes 等的 Bootstrap 修复 github issue link 看看这个 fiddle :jsFiddle JavaScript $("
我在我的网站“Drupal 8”上安装了下一个模块“D8:Bootstrap Tour”,它使用主题“Bootstrap 3”。 https://www.drupal.org/project/bs_t
以下是我的引用代码: 我正在为我的应用程序使用 Bootstrap 游览。 要求: 当我点击“下一步”时,我处于第一步,然后它正在检查“#id2”的值。如果 id2 值不为空,则应跳过该步骤并直接进入
我已经在我的项目中实现了 Bootstrap 之旅。我尝试将其加载到模态窗口上,但没有显示任何内容。下面是我的代码: $(document).ready(function (
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 8 年前。
我正在玩 Bootstrap Tour,我发现自己卡在了导航页面上。 在我的导览中,第四步将用户从 index.cshtml 带到 page.cshtml,这工作正常,但是导览框不会在 page.cs
我是一名优秀的程序员,十分优秀!