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

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

先点击这里可以看在线演示效果

HTML

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

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

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

  1.  
  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>
  1.  

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

jQuery

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

  1.  
  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="http://www.helloweba.com/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. });
  1.  

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

jQuery插件实现的页面功能介绍引导页效果的更多相关文章

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

    现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮 ...

  2. ajax——三级联动下拉列表框的优化(简化页面,用jquery插件代替原来页面代码,返回处理数据类型为"TEXT")

    数据库: 主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  3. RTSP转RTMP-HLS网页无插件视频直播-EasyNVR功能介绍-音频开启

    EasyNVR简介 EasyNVR能够通过简单的摄像机通道配置.存储配置.云平台对接配置.CDN配置等,将统监控行业里面的高清网络摄像机IP Camera.NVR.移动拍摄设备接入到EasyNVR,E ...

  4. jQuery插件 -- 图片随页面滚动fixed

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ViewPager引导页效果实例源码

    首先大家先找到本地的sdk,然后找到Google提供的API,具体查找方法如下:sdk——>docs——>index.html——>develop——>training——&g ...

  6. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  7. Stickup – 轻松实现元素固定效果的 jQuery 插件

    粘贴是一个简单的 jQuery 插件,在页面滚动的时候固定一个元素到浏览器窗口的顶部,让其总是保持在视图中可见.这个插件作用于多页的网站,但是对于单页的布局有额外的功能.借助 CSS,还可以实现当前视 ...

  8. 期待已久的2012年度最佳jQuery插件揭晓

    近日,国外著名博客WDL发布了2012年度最佳 jQuery 插件.jQuery 自2006年发布以来,经过6年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架,这主要归功于众多围 ...

  9. [原创作品]手把手教你怎么写jQuery插件

    这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...

随机推荐

  1. memcached缓存分布式部署方案

    一.分布式方案介绍 比较流行的两种方案: 1.取余分布: 计算key的哈希值,与服务器数量取余,得到目标服务器.优点:实现简单,当某台服务器不可用时,故障转移方便:缺点:当增减服务器时, Key与服务 ...

  2. (转)curl 命令使用

    原文地址:http://blog.sina.com.cn/s/blog_4b9eab320100slyw.html 可以看作命令行浏览器 1.开启gzip请求curl -I http://www.si ...

  3. [Algorithms] Binary Search Algorithm using TypeScript

    (binary search trees) which form the basis of modern databases and immutable data structures. Binary ...

  4. 组合搜索(combinatorial search)在算法求解中的应用

    1. 分治.动态规划的局限性 没有合适的分割方式时,就不能使用分治法: 没有合适的子问题或占用内存空间太大时,就不能用动态规划: 此时还需要回到最基本的穷举搜索算法. 穷举搜索(exhaustive ...

  5. ds finder 唤醒

    http://www.hangge.com/blog/cache/detail_594.html

  6. [Docker] Run Short-Lived Docker Containers

    Learn the benefits of running one-off, short-lived Docker containers. Short-Lived containers are use ...

  7. HtmlParser基础教程 分类: C_OHTERS 2014-05-22 11:33 1649人阅读 评论(1) 收藏

    1.相关资料 官方文档:http://htmlparser.sourceforge.net/samples.html API:http://htmlparser.sourceforge.net/jav ...

  8. 菜单之一:Menu基础内容 分类: H1_ANDROID 2013-11-03 00:23 906人阅读 评论(0) 收藏

    参考<疯狂android讲义>2.10节P168 1.重要接口 Android菜单相关的重要接口共有以下四个: 其中Menu为普通菜单,SubMenu包含子项,ContextMenu当长时 ...

  9. Linux系统下的单调时间函数

    欢迎转载,转载请注明出处:http://forever.blog.chinaunix.net 一.编写linux下应用程序的时候,有时候会用到高精度相对时间的概念,比如间隔100ms.那么应该使用哪个 ...

  10. 【b802】火柴棒等式

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 给你n根火柴棍,你可以拼出多少个形如"A+B=C"的等式?等式中的A.B.C是用火柴 ...