使用intro.js进行多次旅行

Multiple tours with intro.js

本文关键字：旅行 intro js 使用      更新时间：2023-09-26

我们希望为web应用程序提供一个通用的多页面教程和特定页面教程。多页的一个正在运行，特定于页面的一个也会触发，但同时调用两个巡回数据对象。有没有办法在同一页面上进行多次旅行？

function initTours(){
// Start intro tour
document.getElementById('startIntro').onclick = function() {
    introJs().setOption('doneLabel', 'Next page').start('.intro-farm').oncomplete(function() {
        window.location.href = 'nav_season.php?multipage=true';
    });
};
var tourStep = $('.content .intro-farm').attr('data-step');
var nextLink = $('#nextTourLink').attr('href');
if (RegExp('multipage', 'gi').test(window.location.search)) {
    introJs().setOption('doneLabel', 'Next page').goToStep(tourStep).start('.intro-farm').oncomplete(function() {
        window.location.href = nextLink+'?multipage=true';
    });
} 
//Page specific
if ($('.page-tour').length > 0){
    //Page specific tour
    $('.pageHelp').on('click',function() {
        introJs().start('.page-tour');
    });
} else {
    $('.pageHelp').on('click',function(){
        $('#messageModal .row').html("<p>We don't have help tips for this page, but if you are stuck, please don't hesitate to <a href='#'>contact us</a>.</p>")
        $('#messageModal').foundation('reveal', 'open');
    });
}
}

当然，你可以在同一个页面中有多个tour，但你应该检查页面的url，并设置一个条件，防止再次调用第一个tour。

例如，假设您的页面是boo.php，那么对于第一个教程，您应该检查window.location.pathname是否等于boo.php，然后向用户显示第一个教程。重定向到下一个页面（例如boo.php?anotherPage=true）后，再次检查页面的url，并向用户显示下一个教程。

您可能希望使用Programmatic方式定义步骤，这样您就可以随心所欲地定义步骤。如果我正确理解你的话，你的旅程都捕捉到了所有的步骤，对吗？

查看以下代码。它运行良好。

if (RegExp('multipage', 'gi').test(window.location.search)) {
    introJs().setOption('doneLabel',
         'Your next Page &rarr; (Name of Page)').start().oncomplete(function() {
        window.location.href = 'nextpage.html?multipage=true';
    });
}
相关文章：