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参数。我想，它会触发oncomplete之后定义的intro.start()方法。它会重定向到 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中找到单词introJs().start()后触发multipage函数。请记住，我们将second.html称为second.html?multipage=true。这只是在第二页上启动另一个 intro 实例。现在，您可以根据需要以JSON的形式定义选项，或者只使用文档中定义的DOM上的data-step属性。

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

如何使用Intro.js编程进行多页面介绍

1 个答案: