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群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...
随机推荐
- poj1679 The Unique MST(判定次小生成树)
The Unique MST Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 23180 Accepted: 8235 D ...
- php杂项函数
php杂项函数 一.总结 看着函说作用 函数 描述 PHP constant() 返回一个常量的值. 4 define() 定义一个常量. 3 defined() 检查某常量是否存在. 3 d ...
- 介绍linux设备驱动编程
目前,Linux软件工程师大致可分为两个层次: (1)Linux应用软件工程师(Application Software Engineer): 主要利用C库函数和Linux API进行应用 ...
- Mac安装brew及其用法
Mac 安装 brew 及其用法: 安装brew: curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz - ...
- POJ 3086 Triangular Sums (ZOJ 2773)
http://poj.org/problem?id=3086 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1773 让你计算两 ...
- redis学习笔记之虚拟内存
首先说明下redis的虚拟内存与os的虚拟内存不是一码事,但是思路和目的都是相同的.就是暂时把不经常访问的数据从内存交换到磁盘中,从而腾出宝贵的 内存空间用于其他需要访问的数据.尤其是对于redis这 ...
- swift学习第十四天:属性监听器
监听属性的改变 在OC中我们可以重写set方法来监听属性的改变 Swift中可以通过属性观察者来监听和响应属性值的变化 通常是监听存储属性和类属性的改变.(对于计算属性,我们不需要定义属性观察者,因为 ...
- pstack.sh 改进版
pstack.sh 改进版本 #!/bin/bash if (( $# < 1 )) ; then echo "usage: `basename $0` pid" 1> ...
- jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
- Java设计模式之从[暗黑破坏神存档点]分析备忘录(Memento)模式
在大部分游戏中,都有一个"存档点"的概念.比如,在挑战boss前,游戏会在某个地方存档,假设玩家挑战boss失败,则会从这个存档点開始又一次游戏.因此,我们能够将这个"存 ...