jQuery插件实现的页面功能介绍引导页效果
2015-01-13 14:40
435 查看
新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力。Helloweba.com之前也有相关文章介绍:《构建一个用于产品介绍的WEB应用》,相信对有需要的朋友有帮助。本文将介绍另一款基于jQuery的页面引导页插件:pagewalkthrough.js,来看如何使用它。先点击这里可以看在线演示效果 https://github.com/jwarby/jquery-pagewalkthrough
HTML
首先记得加载所需的css文件和jQuery库文件,以及pagewalkthrough插件。<!--CSS--><linktype="text/css"rel="stylesheet"href="css/jquery.pagewalkthrough.css"/><!--jQuery--><scripttype="text/javascript"src="jquery.min.js"></script><!--Pagewalkthroughplugin--><scripttype="text/javascript"src="jquery.pagewalkthrough.min.js"></script>接着,我们在页面的最下部加入引导内容,就是每一步需要展示的内容,默认先隐藏内容,等会用jQuery调用。
<divid="walkthrough-content"><divid="walkthrough-1"><h3>欢迎来到Helloweba示例DEMO演示页</h3><p>页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。</p><p>点击下一步了解更多...</p></div><divid="walkthrough-2">这里是Helloweba网站LOGO,点击这里可以直通网站首页。</div><divid="walkthrough-3">点击这里可以直接看插件的使用教程。</div><divid="walkthrough-4">点击这里去下载源码,免费的哦。。</div><divid="walkthrough-5">这是页脚和版权信息。</div></div>引导内容支持html内容,你可以在里面加入链接、图片等信息。还有就是引导页所需的箭头图片已经打包好,直接用css调用,关于字体,你可以调用外部字体,如手写字体可能效果更好。
jQuery
你完全可以在页面底部加入如下代码来调用pagewalkthrough,关键选项steps是一个数组,定义每一步引导调用的内容,参数wrapper定义了当前引导对应的元素位置,参数popup定义弹出提示引导层,参数content定义关联的内容元素,参数type定义弹出方式,包括tooltip和modal以及nohighlight三种方式,参数position定义了弹出层位置,包括top,left,rightorbottom。$(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_titlea',popup:{content:'#walkthrough-3',type:'tooltip',position:'bottom'}},{wrapper:'a[href="http://www.helloweba.com/down-286.html"]',popup:{content:'#walkthrough-4',type:'tooltip',position:'right'}},{wrapper:'#footerp',popup:{content:'#walkthrough-5',type:'tooltip',position:'top'}}]});//Showthetour$('body').pagewalkthrough('show');});保存之后,运行就能看到你要的效果。pagewalkthrough.js插件官方提供了很多参数配置,包括设置弹出层宽度、滚动速度,是否自动滚动,锁定滚动,以及多种回调函数,定义上一步下一步按钮,以及方法调用等等,这些本文不再描述,有兴趣的朋友可以移步到项目官网了解更多:
相关文章推荐
- jQuery插件实现的页面功能介绍引导页效果
- 网页引导:jQuery插件实现的页面功能介绍引导页效果
- JQuery插件实现网页首次登录提示/页面功能介绍引导/教程式引导/下一步介绍功能
- jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- 采用jquery easyui loading css效果实现加载时的页面覆盖功能
- 实现单页面导航效果的jQuery插件 - SMINT
- jQuery插件实现的加载图片和页面效果
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- 用html5页面引入了一个jquery插件,实现平板上的向上滑动加载更多的功能
- ASP.NET jQuery 食谱11 (通过使用jQuery validation插件简单实现用户登录页面验证功能)
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- 实现单页面导航效果的jQuery插件 - SMINT
- 本文翻译自 Lazy Load Plugin for jQuery, 介绍一个 jQuery 插件, 它提供懒汉式加载页面图片的功能.
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- jQuery插件PrintArea实现javascript打印页面某区域功能
- 实现单页面导航效果的jQuery插件 - SMINT
- 基于jquery的finkyUI插件与Ajax实现页面数据加载功能