如何在单个网页中使用 introJs 设置两个介绍导览

How to setup two introduction tours using introJs in a single webpage?

本文关键字：两个 设置 单个 网页 introJs      更新时间：2023-09-26

我想使用introJs在一个网页中进行两次单独的游览。但是，在这样做的同时，一个巡演的数据步骤与另一个巡演的数据步骤是一致的。

设置不同的实例和步骤，并将它们称为 intro1 和 intro2（或您想要的任何其他内容）。

然后，您可以独立地触发它们作为 intro1.start（） 和 intro2.start（）

请参阅代码以设置以下步骤：

var intro1 = introJs();
intro1.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro1_step1',
            intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',
            position: 'top'
        },            {
            element: '#intro1_step2',
            intro: 'Your profile contains important information which is important to complete so that...',
            position: 'bottom'
        },
        {
            element: '#intro1_step3',
            intro: 'Make sure your attribute is included in your profile because the client may express a preference.',
            position: 'top'
        },
        {
            element: '#intro1_step4',
            intro: 'Click here to add a photograph of yourself.',
            position: 'top'
        },
        {
            element: '#intro1_step5',
            intro: 'Your photograph will appear when your profile matches a ...',
            position: 'top'
        },
        {
            element: '#intro1_step6',
            intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});
var intro2 = introJs();
intro1.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro2_step1',
            intro: 'Welcome to your example2.com dashboard, where...',
            position: 'top'
        },            {
            element: '#intro2_step2',
            intro: 'Your...',
            position: 'bottom'
        },
        {
            element: '#intro2_step3',
            intro: 'Make sure...',
            position: 'top'
        },
        {
            element: '#intro2_step4',
            intro: 'Click here to...',
            position: 'top'
        },
        {
            element: '#intro2_step5',
            intro: 'In this step...',
            position: 'top'
        },
        {
            element: '#intro2_step6',
            intro: 'Take example2.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});

美妙之处在于你不需要在html中嵌入那么多元信息，只需要

<p id="intro1_step1">Blah Blah Blah</p>

我也有类似的情况，页面中有两个面板。每个面板都有其帮助部分。但是，当我单击一个帮助部分时，介绍js也在另一个部分中被激活。每次启动帮助时，我都删除了所有介绍js属性，因此一个帮助部分将无法激活另一个帮助部分。

$（'[data-intro]'）.removeAttr（'data-intro data-position data-step'）;

这根本不可能。

您不能一次为整个页面（document.body）创建两个游览，而不是这样，您可以为 DOM 上的单独元素创建两个单独的游览。

像@brianlmerritt一样，我做了两个程序化介绍.js并使用不同的按钮启动它。

<a href="#" class="btn btn-flat success" id="encomienda_help">
<a href="#" class="btn btn-flat success" id="bitacora_help">

[...]
<script type="text/javascript">
  document.getElementById('encomienda_help').onclick = function() {
    var intro = introJs();
    intro.setOptions({
      doneLabel: 'Siguiente Página',
      steps: [
      {
        element: document.querySelectorAll('#encomienda_step_1')[0],
        intro: "This is the help text for encomienda."
      },
      {
        element: document.querySelectorAll('#encomienda_step_2')[0],
        intro: "This is another help text for encomienda.",
        position: "top"
      }
      ]
    });
    intro.start().oncomplete(function() {
      window.location.href = '/ruta1?multipage=true';
    });
  };
  document.getElementById('bitacora_help').onclick = function() {
    var intro = introJs();
    intro.setOptions({
      doneLabel: 'Siguiente Página',
      steps: [
      {
        element: document.querySelectorAll('#bitacora_step_1')[0],
        intro: "This is the help text for bitácora."
      }
      ]
    });
    intro.start().oncomplete(function() {
      window.location.href = '/ruta2?multipage=true';
    });
  };
</script>
相关文章：