jQuery插件实现的页面功能介绍引导页效果
新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力。
Helloweba.com之前也有相关文章介绍:《构建一个用于产品介绍的WEB应用》,相信对有需要的朋友有帮助。本文将介绍另一款基于jQuery的页面引导页插件:pagewalkthrough.js,来看如何使用它。
HTML
首先记得加载所需的css文件和jQuery库文件,以及pagewalkthrough插件。
- <!-- CSS -->
- <link type="text/css" rel="stylesheet" href="css/jquery.pagewalkthrough.css" />
- <!-- 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="http://www.helloweba.com/down-286.html"]',
- 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
jQuery插件实现的页面功能介绍引导页效果的更多相关文章
- 网页引导:jQuery插件实现的页面功能介绍引导页效果
现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮 ...
- ajax——三级联动下拉列表框的优化(简化页面,用jquery插件代替原来页面代码,返回处理数据类型为"TEXT")
数据库: 主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- RTSP转RTMP-HLS网页无插件视频直播-EasyNVR功能介绍-音频开启
EasyNVR简介 EasyNVR能够通过简单的摄像机通道配置.存储配置.云平台对接配置.CDN配置等,将统监控行业里面的高清网络摄像机IP Camera.NVR.移动拍摄设备接入到EasyNVR,E ...
- jQuery插件 -- 图片随页面滚动fixed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ViewPager引导页效果实例源码
首先大家先找到本地的sdk,然后找到Google提供的API,具体查找方法如下:sdk——>docs——>index.html——>develop——>training——&g ...
- 20 个用于处理页面滚动效果的 jQuery 插件
对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...
- Stickup – 轻松实现元素固定效果的 jQuery 插件
粘贴是一个简单的 jQuery 插件,在页面滚动的时候固定一个元素到浏览器窗口的顶部,让其总是保持在视图中可见.这个插件作用于多页的网站,但是对于单页的布局有额外的功能.借助 CSS,还可以实现当前视 ...
- 期待已久的2012年度最佳jQuery插件揭晓
近日,国外著名博客WDL发布了2012年度最佳 jQuery 插件.jQuery 自2006年发布以来,经过6年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架,这主要归功于众多围 ...
- [原创作品]手把手教你怎么写jQuery插件
这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...
随机推荐
- memcached缓存分布式部署方案
一.分布式方案介绍 比较流行的两种方案: 1.取余分布: 计算key的哈希值,与服务器数量取余,得到目标服务器.优点:实现简单,当某台服务器不可用时,故障转移方便:缺点:当增减服务器时, Key与服务 ...
- (转)curl 命令使用
原文地址:http://blog.sina.com.cn/s/blog_4b9eab320100slyw.html 可以看作命令行浏览器 1.开启gzip请求curl -I http://www.si ...
- [Algorithms] Binary Search Algorithm using TypeScript
(binary search trees) which form the basis of modern databases and immutable data structures. Binary ...
- 组合搜索(combinatorial search)在算法求解中的应用
1. 分治.动态规划的局限性 没有合适的分割方式时,就不能使用分治法: 没有合适的子问题或占用内存空间太大时,就不能用动态规划: 此时还需要回到最基本的穷举搜索算法. 穷举搜索(exhaustive ...
- ds finder 唤醒
http://www.hangge.com/blog/cache/detail_594.html
- [Docker] Run Short-Lived Docker Containers
Learn the benefits of running one-off, short-lived Docker containers. Short-Lived containers are use ...
- HtmlParser基础教程 分类: C_OHTERS 2014-05-22 11:33 1649人阅读 评论(1) 收藏
1.相关资料 官方文档:http://htmlparser.sourceforge.net/samples.html API:http://htmlparser.sourceforge.net/jav ...
- 菜单之一:Menu基础内容 分类: H1_ANDROID 2013-11-03 00:23 906人阅读 评论(0) 收藏
参考<疯狂android讲义>2.10节P168 1.重要接口 Android菜单相关的重要接口共有以下四个: 其中Menu为普通菜单,SubMenu包含子项,ContextMenu当长时 ...
- Linux系统下的单调时间函数
欢迎转载,转载请注明出处:http://forever.blog.chinaunix.net 一.编写linux下应用程序的时候,有时候会用到高精度相对时间的概念,比如间隔100ms.那么应该使用哪个 ...
- 【b802】火柴棒等式
Time Limit: 1 second Memory Limit: 50 MB [问题描述] 给你n根火柴棍,你可以拼出多少个形如"A+B=C"的等式?等式中的A.B.C是用火柴 ...