Question

我想使用超过两页的intro.js。这是一种简单的方法吗？

Answer 1

是的，你可以。如果您查看具有多个页面https://github.com/usablica/intro.js/tree/master/example/multi-page的intro.js示例的代码，您可以看到第一页的代码在用户单击按钮后重定向到第二页：

<script type="text/javascript">
  document.getElementById('startButton').onclick = function() {
    introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
      window.location.href = 'second.html?multipage=true';
    });
  };
</script>

在第二页上，我们使用正则表达式来检查用户是否正在进行介绍。您需要向每个页面添加这样的代码，并将url地址添加到下一个应该显示的页面。如果您想要有多个“介绍流程”（因为问题标题说multiple），您可以给他们提供姓名或号码。然后，您可以使用multipage=true或multipage=beta_version而不是添加multipage=1，并使用reqex检查用户是否应该查看介绍，如果是，则查看是哪一个。

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

    document.getElementById('startButton').onclick = function() {
      introJs().setOption('doneLabel', 'Next page')
        .start().oncomplete(function() {
          if (RegExp('multipage=2', 'gi').test(window.location.search)) {
            window.location.href = 'third.html?multipage=2';
          }
          else {
            window.location.href = 'unicorn.html?multipage=3';
          }
        });
      };
  }
</script>

这可能不是有史以来最好的代码:)，但（如Rich说）没有更多信息我只能猜测这是你想要做的？但希望它会给出一个大致的想法。

Answer 2

if（RegExp（'multipage'，'gi'）。test（window.location.search））{ introJs（）。setOption（'doneLabel'，'Next Page→'）。start（）。oncomplete（function（）{ window.location.href ='nextpage？multipage = true'; }）; }

Answer 3

我能够将 intro.js 用于复杂的多页使用（比他们的 official multipage example 更完整）。查看与 issue I opened about it 关联的 my React solution on Codesandbox。

我可以使用超过2页的多个intro.js吗？

3 个答案: