问题标签 [bootstrap-tour]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
413 浏览

javascript - How can I keep my target element for my bootstrap-tour center of the screen instead of the current step?

For example. Here is a screenshot of the current webpage with half of the target element offscreen.

enter image description here

In this instance, the current step in the tour is centered on screen, but is there a way I could show both on the screen (my steps and my target element i.e. content), without cutting out my content?

Three drop down forms are clicked, and then the user receives queried info from the database. So, the tour starts immediately after the last and final click.

0 投票
2 回答
1235 浏览

ruby-on-rails - 如何根据用户的操作触发和配置 Bootstrap Tour?

我正在使用Bootstrap Tour,它的设置非常简单。

这些是说明:

就我而言,我有一个Profiles#Index,Profiles#ShowDashboard#Index-- 所有这些都有不同的元素,我想进行巡回演出。所以我需要为所有不同的动作/视图指定不同的元素。

我也只想在以下条件下触发游览:

  • 用户第一次登录(可以通过 确定current_user.sign_in_count < 2)。
  • 仅在用户首次登录时,而不是在他们刷新页面时。

我正在使用设计,仅供参考。

我现在将默认 JS 放在我的app/assets/javascripts/profiles.js. 我应该把它移到其他地方才能达到我的上述条件吗?

编辑 1

实际上,我认为它会正常工作,但我什至无法让它工作。

我在我的Profiles#Show页面上,游览没有触发。这是它的设置方式:

这是我的application.html.erb

这是我的application.js

我最初有这个,app/assets/javascripts/profiles.js但是当它停止工作时,我把它移到application.js只是为了确保其他东西没有覆盖它。

在我的Profiles#Show中,我肯定拥有所有这 3 个元素,正如您在下面呈现的 HTML 中所见:

此外,Bootstrap Tour CSS & JS 包含在我呈现的 HTML 中。

所以第一个问题是......我怎么才能让它工作?然后我可以去找其他人。

编辑 2

我添加了一些调试语句application.js,这些是结果。

这就是我application.js现在的样子:

什么可能导致这种情况以及如何进一步调试它?错误似乎在bootstrap-tour.min.js文件中。

0 投票
1 回答
198 浏览

jquery - 如何在 Bootstrap Tour 中仅选择特定类的第一个元素?

我在执行我的 Tour 的页面上有很多 div 类.contact-box

我不想全选,只选第一个。

我试过这个:

但这没有用。

我要怎么做?

0 投票
3 回答
1101 浏览

javascript - 为什么在我的 Bootstrap Tour 期间所选元素并不总是弹出?

这是我的 Bootstrap Tour 正在处理的 HTML:

这是触发游览的 JS:

以下是旅游在背景下的样子:

这是正确呈现的: 突出显示元素可见

这两个未正确呈现,突出显示的元素不可见: 突出显示的元素不可见 搜索栏元素不可见

如何让所有元素像顶部一样呈现,突出显示的元素可见?

编辑 1

这是一个显示行为的 JSFiddle:

https://jsfiddle.net/nrkry27p/

具体来说,请注意第二步,它不会像演示中的搜索那样突出显示。除了在我的真实代码中,搜索不会突出显示......但您应该能够了解正在发生的事情。

最终编辑

经过多轮编辑,不断的来来回回,我们终于弄明白了。因此,我决定清理所有对理解问题和解决方案并没有真正增加价值的编辑。

0 投票
1 回答
344 浏览

javascript - Bootstrap-tour tour.init 不是函数

我正在尝试让 bootstrap-tour 工作我使用bootstrap-rails gem在我的 rails 应用程序中包含 bootstrap rails。

我已经看到通过清除本地存储解决的许多其他问题我已经尝试过该修复并且它无处可去。我的问题不同,它在到达 init 函数时抛出错误。

我的 cofeescript 编译为与 bootstrap tour上的示例匹配的 js

介绍咖啡

我的 application.js

任何帮助是极大的赞赏。

0 投票
2 回答
807 浏览

jquery - 如何使用 Bootstrap Tour 弹出框浏览选项卡?

我有多个弹出框我想用锚链接显示到不同的选项卡中,我正在寻找一个解决方案来做到这一点。

我已经阅读了问题 #78onShow ,其中有人显然使用参数而不是使用参数使其工作,redirect但我对这些功能不满意,我无法使其工作。

我正在做的是使用onNext()andonPrev()函数在显示下一个(或上一个)弹出框之前使用 JQuery 打开选项卡。

我的问题是,例如,在显示弹出元素“tour2”后(通过单击下一步)选项卡#tab3 正确显示,但不幸的是没有弹出元素“tour3”。

我注意到,如果我加载前一个选项卡,然后再次加载选项卡#tab3,弹出元素“tour3”会突然出现。

知道这有什么问题吗?

这是我使用的代码:

谢谢,

0 投票
3 回答
1711 浏览

jquery - Bootstrap 游览开始按钮

我在我的网站中使用 bootstrap 并解释我想使用bootstrap tour的网站。我已经在我的测试页面中实现了这个并且工作正常。但是当加载页面时游览开始,我想在单击按钮时开始游览。我已经按照这篇文章来实现我的引导之旅。

这是引导程序演示的 javascript:

这是html部分:

如何通过单击按钮开始我的旅行?

谢谢

0 投票
1 回答
1070 浏览

yii2 - 多页引导浏览,第二页未显示弹出框

我使用 yii2 作为后端框架,我想为我的应用程序制作游览,但是第二页上没有显示引导游览弹出框,我为引导游览创建了一个资产包并将其注册到布局中,引导游览在第一页上正常工作页面,但是当转到另一个页面时,它会出现问题并在下一页显示调试:
Bootstrap Tour 'tour' | 重定向到纸张/上传
Bootstrap Tour 'tour' | 错误重定向循环到纸张/上传

我已经在 chrome 的开发人员工具中检查了窗口本地存储,并在显示第二页窗口本地存储时看到它在正确的步骤上:tour_current_step value 2,

还有一个问题,我应该如何在 yii2 路由器的引导程序中设置路径选项的值,我的路径是否正确?例如第一步在网站的主页上是:“”,是否正确,我想如果有人点击popover的上一个按钮返回上一步。
这是我的 javascript 代码,我在布局文件中注册了这个 javascript 代码:

0 投票
1 回答
1117 浏览

javascript - Bootstrap-tour with Bootstrap 4 alpha 6 n.popover 不是函数

尝试将bootstrap-tour与 bootstrap 4 一起使用,但出现以下错误:

TypeError:n.popover 不是函数

我正在初始化这样的代码:

0 投票
0 回答
220 浏览

angularjs - Angular UI Tour 中的背景不覆盖整个屏幕

我已经申请了 tour-step-backdrop="true"。它仅适用于屏幕的一部分而不是整个屏幕。在此处输入图像描述

如您所见,图像的底部没有被覆盖。所以如果我想覆盖全屏那么怎么做呢?