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

我尝试过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();打开一个模态窗口？

解决方法:

Sideshow是一个现代且功能强大的库,用于为Web应用程序和站点创建交互式游览,是SPA应用程序的理想选择.

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

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

和其他强大的功能！