Question

我希望使用introJs在单个网页中进行两次单独的游览。但是在这样做时，一次巡演的数据步骤与其他巡回赛的数据步骤一致。

Answer 1

设置不同的实例和步骤，并将它们称为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>

Answer 2

我有类似的情况，我在页面中有两个面板。每个小组都有其帮助部分。然而，当我点击一个帮助部分时，intro js也被激活了。我每次开始帮助时都删除了所有的介绍js属性，因此一个帮助部分将无法激活另一个。

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

Answer 3

简直不可能。

您不能同时为整个页面（document.body）进行两次巡视，而不是这样，您可以为DOM上的单独元素创建两个单独的巡视。

Answer 4

就像@brianlmerritt一样，我制作了两个程序化的intro.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>

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

4 个答案: