我们希望为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 → (Name of Page)').start().oncomplete(function() {
window.location.href = 'nextpage.html?multipage=true';
});
}