javascript - 如何使用 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

它就像组合存储库中 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 方法。它重定向到 下一个 页面，在我的例子中是 second.html。请记住传递参数 multipage=true。

second.html 是一个普通的 HTML 文件，但您需要启动 introJs 函数才能使整个过渡多页。你所做的就是:

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

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

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