如何使用 Intro.js 编程制作多页介绍

Question

您好，我刚开始学习 javascript，我想知道如何使用 intro.js 制作多页介绍

   function beginer() {
    var intro = introJs();
    intro.setOptions({
        steps: [
        {
            element: '#beginer1',
            intro: "This is a <b>bold</b> tooltip."
        },
        {
            element: '#beginer2',
            intro: "Ok, <i>wasn't</i> that fun?",
            position: 'bottom'
        },

        ]
    });

    intro.setOptions({
        'showStepNumbers': false
    });

    intro.start();
}

Answer 1

就像在 repo 中组合 multipage 和 programmatic 示例中给出的选项一样简单。多页示例为here

您所要做的就是在第一页添加一个onComplete 侦听器，如下所示：

function beginer() {
   var intro = introJs();
   intro.setOptions({
    showStepNumbers: false,
    doneLabel: "Next page",
    steps: [
    {
        element: '#beginer1',
        intro: "This is a <b>bold</b> tooltip."
    },
    {
        element: '#beginer2',
        intro: "Ok, <i>wasn't</i> that fun?",
        position: 'bottom'
    },

    ]
   });

  intro.start().oncomplete(function() {
      window.location.href = 'second.html?multipage=true';
  });
}

我已经清理了您的函数中的 setOptions 调用，并在其中组合了所有选项。这样您就不必执行setOptions 多个doneLabel 参数。我猜，它触发了在intro.start() 之后定义的oncomplete 方法。它重定向到 next 页面，在我的例子中是second.html。记得传递参数multipage=true。

second.html 是一个普通的 HTML 文件，但你需要启动 introJs 函数来制作整个过渡多页。你要做的就是：

<script type="text/javascript">
  if (RegExp('multipage', 'gi').test(window.location.search)) {
    introJs().start();
  }
</script>

这实质上是在在浏览器地址栏中的 url 或 href 中找到单词 multipage 后触发 introJs().start() 函数。请记住，我们调用了second.html，例如second.html?multipage=true。这只是在第二页上启动另一个 intro 实例。现在，您可以根据需要在此处以 JSON 形式定义选项，或者仅使用文档中定义的 DOM 上的 data-step 属性。

希望它能让你朝着正确的方向开始。