jQuery插件实现的页面功能介绍引导页效果

新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力。

查看演示 下载源码

Helloweba.com之前也有相关文章介绍:《构建一个用于产品介绍的WEB应用》,相信对有需要的朋友有帮助。本文将介绍另一款基于jQuery的页面引导页插件:pagewalkthrough.js,来看如何使用它。

HTML

首先记得加载所需的css文件和jQuery库文件,以及pagewalkthrough插件。

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="https://zhishitu.com" />

<!-- jQuery -->
<script type="text/javascript" src="/jquery.min.js"></script>
<!-- Page walkthrough plugin -->
<script type="text/javascript" src="/jquery.pagewalkthrough.min.js"></script>
知识兔

接着,我们在页面的最下部加入引导内容,就是每一步需要展示的内容,默认先隐藏内容,等会用jQuery调用。

<div id="walkthrough-content">
    <div id="walkthrough-1">
        <h3>欢迎来到Helloweba示例DEMO演示页</h3>

        <p>页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。</p>
        <p>点击下一步了解更多...</p>
    </div>

    <div id="walkthrough-2">
        这里是Helloweba网站LOGO,点击这里可以直通网站首页。
    </div>

    <div id="walkthrough-3">
        点击这里可以直接看插件的使用教程。
    </div>

    <div id="walkthrough-4">
        点击这里去下载源码,免费的哦。。
    </div>

    <div id="walkthrough-5">
        这是页脚和版权信息。
    </div>
</div>
知识兔

引导内容支持html内容,你可以在里面加入链接、图片等信息。还有就是引导页所需的箭头图片已经打包好,直接用css调用,关于字体,你可以调用外部字体,如手写字体可能效果更好。

jQuery

你完全可以在页面底部加入如下代码来调用pagewalkthrough,关键选项steps是一个数组,定义每一步引导调用的内容,参数wrapper定义了当前引导对应的元素位置,参数popup定义弹出提示引导层,参数content定义关联的内容元素,参数type定义弹出方式,包括tooltip和modal以及nohighlight三种方式,参数position定义了弹出层位置,包括top,left, right or bottom。

$(function() {
    $('body').pagewalkthrough({
        name: 'introduction',
        steps: [{
           popup: {
               content: '#walkthrough-1',
               type: 'modal'
           }
        }, {
            wrapper: '#logo',
            popup: {
                content: '#walkthrough-2',
                type: 'tooltip',
                position: 'bottom'
            }
        }, {
            wrapper: 'h2.top_title a',
            popup: {
                content: '#walkthrough-3',
                type: 'tooltip',
                position: 'bottom'
            }
        }, {
            wrapper: 'a[href="https://zhishitu.com"]',
            popup: {
                content: '#walkthrough-4',
                type: 'tooltip',
                position: 'right'
            }
        }, {
            wrapper: '#footer p',
            popup: {
                content: '#walkthrough-5',
                type: 'tooltip',
                position: 'top'
            }
        }]
    });

    // Show the tour
    $('body').pagewalkthrough('show');
});
知识兔

保存之后,运行就能看到你要的效果。pagewalkthrough.js插件官方提供了很多参数配置,包括设置弹出层宽度、滚动速度,是否自动滚动,锁定滚动,以及多种回调函数,定义上一步下一步按钮,以及方法调用等等,这些本文不再描述,有兴趣的朋友可以移步到项目官网了解更多:https://github.com/jwarby/jquery-pagewalkthrough

计算机