如何在单个网页中使用introJs设置两个介绍游览？ [英] How to setup two introduction tours using introJs in a single webpage?

问题描述

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

I want to have two separate tours in a single webpage using introJs. But while doing this, data-steps of one tour is coinciding with the other tour.

推荐答案

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

Set up different instances and steps and call them intro1 and intro2 (or whatever else you want).

然后你可以单独触发它们作为intro1.start（）和intro2.start（）

You can then trigger them independently as intro1.start() and intro2.start()

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

See the code to set up the steps below:

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中嵌入那么多的元信息，只需

The beauty is you don't need as much meta information embedded in the html, just

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

这篇关于如何在单个网页中使用introJs设置两个介绍游览？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！