用于单页面应用程序的Javascript工具

Question

我曾经看过一个javascript工具（可能是jquery插件）来实现功能/指南游览功能，遗憾的是我没有为该页面添加书签。

它使用了叠加层并专注于文档元素，可能基于id属性。

Joyride或我发现谷歌搜索的任何内容都不支持此功能。

你有什么想法吗？

Answer 1

Sideshow是一个现代且功能强大的库，用于为Web应用程序和站点创建交互式游览。

Sideshow不仅可以指导您的用户，还可以与他们互动：

• 通过屏蔽屏幕的其余部分，突出显示您在每个步骤（表单，div，图像，字段等）中谈论的部分（Sideshow不使用z-index方法，它的面具没有位于元素后面，但实际上围绕着它。）
• 监控用户的行为和某些屏幕的状态。
• 为教程创建智能步骤，在满足某些条件时会自动进行
• 在您的教程之间创建关系，这样，当您的用户完成某些教程时，会显示包含相关游览的列表。
• 使用Markdown进行丰富的格式化步骤说明
• 使用事件（例如beforeStep / afterStep，beforeWizardStarts / afterWizardEnds之前）执行一些准备工作或其他任何事情
• 根据用户正在查看的屏幕显示上下文教程，每个教程都有自己的条件来检查是否符合该屏幕的条件

等强大功能！

Answer 2

Intro.js是对网站和功能的更好介绍，并为您的项目提供分步指南。

特点：

• 键盘+鼠标导航
• 快速＆amp;小
• 浏览器兼容性
• 免费＆amp;开源

Answer 3

jquerypowertour.com可以突出显示元素等等。我没有用它，但看起来非常强大。

但我认为可以轻松修改JoyRide或Guiders-JS之类的内容，与jQuery Highlighter plugin - Demo

结合使用

Answer 4

此时，我很可能会为此选择 Shepherd。 （不过，介绍和杂耍会紧随其后。）

代码很干净，它有很好的默认样式，易于替换，注意使其易于访问并提供键盘支持，并且它与多个框架集成：

• 反应
• 角度
• 余烬
• Vue
• Rails（通过 Abraham）
• 可能还有一些我不知道的

当然它也适用于 vanilla JS 或 ES 模块。

此外，它不需要 jQuery。一切需要 jQuery 的东西似乎都是 2005 年的样子。