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不仅仅指导您的用户,还可以与他们互动:

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

和其他强大的功能!