我已经为aSimpleTour创建了一个非常初始的,不完整的初步模式,用于为网站的2到3页浏览生成入门功能。
插件链接 http://alvaroveliz.github.io/aSimpleTour/
部分由于我对这个插件的入门级知识,我一直在努力用现有的应用程序获得这个插件的工作原型。
我的目标是初始化游览以跳过具有不同内容的多个页面。
问题
如何正确使用此插件为每个页面使用我自己的容器跳转到多个页面?
我的初始化代码如下。
<script>
var tour = {
autoStart: true,
useOverlay: false,
data : [
{ tooltip:'', stepText: '2 of 3', message: 'page 2 content', position: 'TL', location: '/#/app/page2#tour=2'},
{ tooltip:'', stepText: '3 of 3', message: 'page 3 content', position: 'TL', location: '/#/app/page3#tour=3'}
],
stepText: '1 of 3',
message: 'page 1 content',
location: '/#/app/page1#tour=1',
controlsPosition : 'TL',
buttons: {
next : { text : 'Let\'s Do It', class : 'btn-green'},
//prev : { text : '← Previous', class: 'btn btn-default' },
//start : { text : 'Start', class: 'btn btn-primary' },
end : { text : 'Skip', class: 'btn-gray' }
},
controlsCss: {
// background: 'rgba(124, 124, 124, 0.9)',
// color: '#fff',
width: '250px',
'border-radius': '0px'
}
};
$(document).ready(function(){
$.aSimpleTour(tour);
});
</script>
图书馆的修改控制声明
controls = '<div id="tourControls" class="account-settings-confirm-container-overlay filter-drop-shadow">\
<div id="tourText" class="overlay-text">\
<div id="confirm-step">'+
+ options.stepText +
'</div><div id="message">'+
options.message+
'</div></div>\
<div id="tourButtons" class="action-buttons">\
<button id="tourEnd" class="btn-gray">SKIP</button>\
<button id="tourNext" class="btn-green">LET\'S DO IT</button>\
</div>\
</div>';