javascript - 用于在动态页面上创建网站游览的 jQuery 插件

Question

我已经尝试使用 LinkedIn Hopscotch 和 Intro.js 来创建网站游览。但它们都非常适合静态页面/多个静态页面。

问题是我有一个单页应用程序——其中大部分元素都是在 BackboneJS 的帮助下动态创建的。在这种情况下 - Hopscotch 和 Intro.js 都不能附加/等待动态创建的元素。

有没有图书馆可以这样做。或者如果这可以使用 Hopscotch/Intro.js 实现

var tour = {
    id: "hello",
    steps: [{
            title: "Welcome!",
            content: "Hey there! If you have just 2 minutes.",
            target: document.querySelector(".list a"),
            placement: "bottom"
        }, {
            title: "Create a new file",
            content: "Create a new file",
            target: document.querySelector("#page a"),
            placement: "right",
            onNext: function () {
                $('.add-new a').click();
            }
            ]
    };
    hopscotch.startTour(tour);

例如:在 Hopscotch 中，在 $('.add-new a').click(); 之后我应该做什么？哪个打开模态窗口？

Answer 1

Sideshow是一个现代且功能强大的库，用于为 Web 应用程序和网站创建交互式导览，非常适合 SPA 应用程序。

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

• 通过屏蔽屏幕的其余部分(Sideshow 对此不使用 z-index 方法，它的掩码并不位于元素后面，而是真正围绕着它)。
• 监控用户的行为和某些屏幕的状态。
• 为您的教程创建智能步骤，在满足某些条件时自动进行
• 在您的教程之间建立关系，这样，当您的用户完成一些教程时，就会显示一个包含相关导览的列表。
• 使用 Markdown 对步骤描述进行丰富的格式化
• 使用事件(例如 beforeStep/afterStep、beforeWizardStarts/afterWizardEnds)来执行一些准备或其他任何事情
• 根据用户正在查看的屏幕显示上下文教程，每个教程都有自己的条件来检查它是否符合该屏幕的条件

以及其他强大的功能!