问题标签 [hopscotch]

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 投票
1 回答
2451 浏览

jquery - LinkedIn hopscotch tutorial - how to change the name of the label?

I am setting up a LinkedIn tour for the website. http://linkedin.github.io/hopscotch/ It is working fine. But I need to change the text of a done button. Once I put the following line i18n.doneBtn, the static page comes up but dynamic execution stops and tour does not appear. Would you have any suggestions on how to fix it? Thanks!

0 投票
6 回答
6730 浏览

jquery - 跳房子之旅踏上动态生成的内容

我在我的应用程序中实施了几个Hopscotch之旅。

到目前为止,我已经成功地进行了多次巡回演出,但今天,我面临着一个我无法解决的挑战。

我的问题是:如何获得一个游览步骤目标来处理动态生成的内容?

这是HTML:

每当我单击链接时,它都会动态创建一个包含许多元素的 div;其中之一是一个 div 类,名为.quarto-config-wrapper.

如果我试图让我的 Hopscotch 之旅进入这个元素,它就行不通;我猜动态创建的元素在 DOM 中不可用于操作。

这是我的跳房子步骤代码:

第一步有效,但第二步无效。

我做错了什么,我该如何解决?

0 投票
1 回答
297 浏览

web - 如何使用 Hopscotch 库进行自动游览?

Hopscotch 在为我的网站开发旅游时非常适合我。我正在寻找一种以一些自定义时间延迟自动执行游览步骤的方法,但没有找到任何相同的 API。

0 投票
1 回答
1815 浏览

javascript - 从 JSON 属性中删除双引号

我正在尝试使用 hopscotch.js 创建一个交互式游览。JavaScript 库需要 tour 才能工作的标准数据结构如下:

将游览步骤直接放入 JavaScript 库效果很好,但理想情况下,我希望能够将所有这些细节保存在数据库中,并使用 AJAX 将数据传递给 hopscotch.js。(这样可以动态创建游览,并且content可以在不发布代码的情况下进行更改)。

除了我target使用document.querySelector()元素选择器时,一切都运行良好。

我的每个游览步骤的基本 C# 模型如下:

作为Target一个字符串,我必须用双引号传递值。

这样做的问题是,当它被序列化为 JSON 时,使用 Chrome 开发者工具查看页面时会出现以下错误:

Syntax error, unrecognized expression: document.querySelector(".btn-primary")

浏览已经返回到页面的 JSON 数据,我可以看到我周围的双引号document.querySelector()导致了问题。

target当我指定targetvia时,我需要从我的中删除这些双引号,document.querySelector()但是当我target基于 HTML 标记(例如header.

有什么想法可以实现这一目标吗?

0 投票
1 回答
866 浏览

javascript - 使用 Hopscotch 自动播放巡演并在关闭/完成后不再播放?

Hopscotch 示例之旅设置参数和调用hopscotch.startTour(tour);关闭“x”和“完成”按钮似乎都不能阻止它在页面加载后再次播放。

那怎么能做到呢?

0 投票
2 回答
621 浏览

html - 如何实施LinkedIn Hopscotch

我想知道如何实现一个简单的 LinkedIn HopScotch。

我试图实施,但未能成功。

以下是我尝试的实现;

我应该根据旅游对象添加一个<div>带有 id 的对象吗?hello-hopscotch

http://cdnjs.com/libraries/hopscotch是我的图书馆的来源;我已经实现hopscotch.min.csshopscotch.min.js.

我做错了什么,我该如何解决?

0 投票
1 回答
609 浏览

javascript - Hopscotch on关闭游览功能

我正在使用 Hopscotch 创建一个游览,我想为用户创建一个能够在他们点击页面后进行或退出页面游览的能力。

我正在尝试创建一个 onClose 函数,但我被卡住了。

等等等等,它不工作。也没有显示结束游览的按钮。任何想法都会有所帮助!

0 投票
1 回答
294 浏览

javascript - 从用 .ts 编写的简单 Angular2 应用程序调用/加载 .js 类和函数时遇到问题

我有一个简单的 Angular 应用程序(https://angular.io/resources/live-examples/toh-6/ts/eplnkr.html),我正在尝试使用hopscotch.jshttp://linkedin.js)添加图形覆盖。 github.io/hopscotch/)。通过调用此脚本,我让 hopscotch 从我的index.html成功运行:

但是当试图将它与我的角度应用程序分开时,我不能/不知道如何正确地将它与其依赖项(hopscotch.jshopscotch.css)连接起来。我对 angular2 很陌生,今天大部分时间都在研究这个,但无济于事。像.ts文件这样简单的东西,它是我的应用程序的一部分,可以调用hopscotch.startTour(tour); 就足够了。任何帮助,将不胜感激!谢谢。

0 投票
0 回答
86 浏览

hopscotch - 在旅行结束时开始新的旅行不起作用

在上面的代码中,我试图在完成第一次巡演后调用另一个跳房子巡演。但这并没有开始下一次巡回演出。帮助我知道我哪里出错了。

谢谢...

0 投票
1 回答
565 浏览

reactjs - 跳房子多页游览不起作用

我正在尝试为我在 react 中的应用程序实现 hopscotch tour。hopscotch 中的多页游览无法正常工作。文档说它可以与 sessionStorage 和 cookie 一起使用,这可能是一个问题。如果这些是页面中的步骤1 导航前

这在第二页

使游览从一个页面导航到另一个页面的第一页和第二页中的步骤究竟应该是什么。

这不起作用,导航到第二页后它仍然重复相同的步骤,有时它不显示任何步骤。我可以在我的反应应用程序中使用 hopscotch 详细实现多页巡回演出吗?