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之前）执行一些准备工作或其他任何事情
根据用户正在查看的屏幕显示上下文教程，每个教程都有自己的条件来检查是否符合该屏幕的条件

等强大功能！

Answer 2

只有在从骨干加载所有内容后才能尝试初始化跳房子：

render: function() {
    // do your normal render stuff
    this.afterRender();
},

afterRender: function() {
    hopscotch.startTour(tour);
}

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

2 个答案: