aSimpleTour.js(jQuery插件) - 如何在多个独立页面中正确初始化和使用此插件?

时间:2016-09-11 07:05:36

标签: javascript jquery

我已经为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 : '&larr; 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>';

0 个答案:

没有答案