pagewalkthrough强大的jquery引导插件

所属分类:引导页

 4319次|    12次   点击收藏(2)

pagewalkthrough强大的jquery引导插件

pagewalkthrough是一个比较强大的引导插件,使用起来也很方便。

这个引导页是github上面的一个开源项目:https://github.com/jwarby/jquery-pagewalkthrough

我的这个案例代码如下:


  $('body').pagewalkthrough({
        name: 'introduction',
        steps: [{
           popup: {
               content: '#haorooms-1',
               type: 'modal'
           }
        }, {
            wrapper: '#logo',
            popup: {
                content: '#haorooms-2',
                type: 'tooltip',
                position: 'bottom'
            }
        }, {
            wrapper: 'h2.top_title a',
            popup: {
                content: '#haorooms-3',
                type: 'tooltip',
                position: 'bottom'
            }
        }, {
            wrapper: 'a[href="http://www.haorooms.com/download"]',
            popup: {
                content: '#haorooms-4',
                type: 'tooltip',
                position: 'right'
            }
        },]
    });

    // Show the tour
    $('body').pagewalkthrough('show');

关于前端资源库

前端资源库是haorooms博主平时积累的前端资源,大部分来源于互联网。但经过博主调试和加工,集聚了博主的心血。

因此,资源库所有资源,仅供学习和参考,切勿下载下来用于商业用途或者转卖。转载请注明来自haorooms博客资源库!

联系方式
关键词搜索