2

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

4

4 回答 4

7

设置不同的实例和步骤，并将它们称为 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>
于 2015-08-11T12:32:47.610 回答
1

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

$('[data-intro]').removeAttr('data-intro data-position data-step');

于 2014-08-19T17:52:48.080 回答
0

简直是不可能的。

您不能同时为整个页面 ( document.body) 设置两个游览，而是可以为 DOM 上的单独元素创建两个单独的游览。

于 2013-10-01T10:12:40.747 回答
0

像@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>
于 2016-06-04T05:59:30.243 回答