使用 intro.js 进行多次游览答案

【问题标题】：Multiple tours with intro.js使用 intro.js 进行多次游览
【发布时间】：2013-08-09 22:35:28
【问题描述】：

我们希望有一个通用的多页面导览，以及适用于网络应用的页面特定导览。多页面功能正在运行，特定页面的页面也触发，但调用两个旅游数据对象。有没有办法在同一页面上进行多个游览？

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');
    });
}
}

【问题讨论】：

标签： javascript intro.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可能希望使用Programmatic way 定义您的步骤，因此您可以根据需要定义您的步骤。如果我对您的理解正确，您的游览都包含所有步骤，对吗？

【讨论】：

【解决方案3】：

看下面的代码。它工作正常。

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';
    });
}

【讨论】：