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 css3动画分步指引插件guide分步引导页面功能
该demo使用的是jquery的pagewalkthrough.js插件,简单易用,容易理解,编译工具用的idea
jquery网页向导插件可自动滚动页面步骤引导操作
主要介绍了jQuery插件pagewalkthrough实现引导页效果的方法和示例代码,十分的详细和实用,有需要的小伙伴可以参考下。
jQuery页面引导插件制作搜索页面步骤引导代码
用户第一次使用产品时需要建立一个使用向导,引导用户如何使用产品,比如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力。
这是一款基于jquery.mobile插件实现的jQuery页面功能分步指引介绍代码,网页新功能步骤引导介绍动画特效。
jquery制作最近网站比较流行的网站页面功能引导用户,提示用户网站的主要功能和操作。当用户首次进入网站时会提示网站功能引导,提示用户操作。写入cookie浏览器缓存,下次不重复提示网站页面功能引导。
这是一款仿照Google和Facebook上引导用户熟悉页面版块或页面功能的jQuery用户向导功能插件。该用户向导插件可以很容易的定制提示框的位置、内容,并可以分多步提示用户,功能非常强大。
一共50个jQuery插件打包: 3D樱花漫天飞舞 20种按钮效果 30款css3 loading加载动画效果 calendar css3-hoverButton20160128 DreamMsg excel excel导入 jQuery和CSS3动感手风琴多级列表树菜单 jquery手写签名插件 ...
引入js文件 [removed][removed] [removed][removed] [removed][removed] 基于jquery.mobile插件实现的jQuery页面功能分步指引介绍代码,网页新功能步骤引导介绍动画特效。
你曾今在很多网站上都看到过这种效果,当你第一次登陆时,就会有一个操作向导来提示你页面的每个功能和操作方法。这个页面向导插件使用jQuery制作,可以简单的引导用户熟悉网站功能。
NULL 博文链接:https://jsctrlc.iteye.com/blog/1999588
jquery博客网站浮动小人提示步骤引导信息 jquery博客网站浮动小人提示步骤引导信息
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧...
TourJS是一款tooltip风格高级jquery分步引导插件。TourJS通过在关键位置显示tooltip信息,来分步引导用户进行页面操作,功能非常实用。
jQuery页面步骤引导新手代码是一款bootstrap搜索页面步骤引导效果。
jquery.dialog2.js使用 bootstrap 提供的模态对话框,作为插件为网页提供可控的对话框功能。 特征 Ajax 内容 对话框中的 Ajax 链接和表单提交 加载指示器 本土化 对 jQuery.UI 没有依赖关系 可以通过进行控制 依赖...
jQuery浮动表单标签jQuery插件,用于在选中或填写时将输入占位符转换为浮动表单标签。安装包括和jquery.floatingFormLabel.js脚本:< script src =" ...