夏日博客

A-A+

基于jQuery插件的页面功能介绍引导页示例

2016年01月09日 前端设计 暂无评论 阅读 6 views 次

引导页是很多大公司在做出的产品或公司是我们初次进入都会有一个引导页告诉我们来如何操作了，下面小编来为各位介绍这个引导页实现方法．新产品上线或是改版升级，我们会在用户第一次使用产品时建立一个使用向导，引导用户如何使用产品，如使用演示的方式逐一介绍界面上的功能模块，从而提升了用户体验和产品的亲和力。

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

HTML

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

  1. <!-- CSS -->   
  2. <link type="text/css" rel="stylesheet" href="css/jquery.pagewalkthrough.css" />   
  3. <!-- jQuery -->   
  4. <script type="text/javascript" src="jquery.min.js"></script>   
  5. <!-- Page walkthrough plugin -->   
  6. <script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script>  

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

  1. <div id="walkthrough-content">   
  2.     <div id="walkthrough-1">   
  3.         <h3>欢迎来到Helloweba示例DEMO演示页</h3>   
  4.    
  5.         <p>页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。</p>   
  6.         <p>点击下一步了解更多...</p>   
  7.     </div>   
  8.    
  9.     <div id="walkthrough-2">   
  10.         这里是Helloweba网站LOGO，点击这里可以直通网站首页。   
  11.     </div>   
  12.    
  13.     <div id="walkthrough-3">   
  14.         点击这里可以直接看插件的使用教程。   
  15.     </div>   
  16.    
  17.     <div id="walkthrough-4">   
  18.         点击这里去下载源码，免费的哦。。   
  19.     </div>   
  20.    
  21.     <div id="walkthrough-5">   
  22.         这是页脚和版权信息。   
  23.     </div>   
  24. </div>  

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

jQuery

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

  1. $(function() {   
  2.     $('body').pagewalkthrough({   
  3.         name: 'introduction',   
  4.         steps: [{   
  5.            popup: {   
  6.                content: '#walkthrough-1',   
  7.                type: 'modal'   
  8.            }   
  9.         }, {   
  10.             wrapper: '#logo',   
  11.             popup: {   
  12.                 content: '#walkthrough-2',   
  13.                 type: 'tooltip',   
  14.                 position: 'bottom'   
  15.             }   
  16.         }, {   
  17.             wrapper: 'h2.top_title a',   
  18.             popup: {   
  19.                 content: '#walkthrough-3',   
  20.                 type: 'tooltip',   
  21.                 position: 'bottom'   
  22.             }   
  23.         }, {   
  24.             wrapper: 'a[href="/down-286.html"]',   
  25.             popup: {   
  26.                 content: '#walkthrough-4',   
  27.                 type: 'tooltip',   
  28.                 position: 'right'   
  29.             }   
  30.         }, {   
  31.             wrapper: '#footer p',   
  32.             popup: {   
  33.                 content: '#walkthrough-5',   
  34.                 type: 'tooltip',   
  35.                 position: 'top'   
  36.             }   
  37.         }]   
  38.     });   
  39.    
  40.     // Show the tour   
  41.     $('body').pagewalkthrough('show');   
  42. });   

保存之后，运行就能看到你要的效果。pagewalkthrough.js插件官方提供了很多参数配置，包括设置弹出层宽度、滚动速度，是否自动滚动，锁定滚动，以及多种回调函数，定义上一步下一步按钮，以及方法调用等等，这些本文不再描述.

标签：

给我留言