[本文为转载——重编辑]
插件描述:所有的所有,都直接调用!
pagewalkthrough.js 引导内容支持html内容,你可以在里面加入链接、图片等信息。还有就是引导页所需的箭头图片已经打包好,直接用css调用,关于字体,你可以调用外部字体,如手写字体可能效果更好。
首先在你的原有网站页面中引入jQuery库和pagewalkthrough插件。
注意你的引用路径是否正确!
<!-- CSS --> <link 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>
接着,在我们的页面最下部加入引导内容(当然这些代码还是在<body>和</body>标签之间的最后面!),这些内容就是每一步需要展示的内容,需要先隐藏,等下会用jQuery来调用的。
手动隐藏设置:(为什么这里要手动设置呢?因为你下载的东东,没有设置在CSS中!)
在页面<head>和</head>间加入样式:
<style type="text/css"> #walkthrough-content{display:none} </style>
这里,复制粘贴吧!放在<body>和</body>标签之间的最后面!是的,最后面,最后面,最后面!
<div id="walkthrough-content"> <div id="walkthrough-1"> <h3>欢迎来到PageWalkThrough示例DEMO演示页</h3> <p>页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。</p> <p>这里可以用HTML标签语句哟!如链接:本文由<a href="http://qoogle.cn" target="_blank">qoogle.cn</a>重编辑的。</p> <p>点击下一步了解更多...</p> </div> <div id="walkthrough-2"> 这里是qoogle.cn网站的LOGO,点击这里可以直通网站首页。 </div> <div id="walkthrough-3"> 点击这里可以直接看WalkThrough插件的使用教程。 </div> <div id="walkthrough-4"> 点击这里可以去WalkThrough官网查看源码和原码,全英文的哦。。 </div> <div id="walkthrough-5"> 这是本文介绍的WalkThrough引导页 </div> </div>
引导内容是支持html标签的,你可以在里面用html标签加入链接、图片等信息。
还有就是引导页所需的箭头图片已经打包好,直接用css调用(自动调用,因为有jquery.pagewalkthrough.css),关于字体,你可以调用外部字体,如手写字体可能效果更好。
你需要改的是:1、文字内容(支持HTML);2、增加步数,即复制粘贴内容部分的一对<div>标签,然后改递增数字。
接下来就是用jQuery调用上面的内容,
复制下面代码,放置上面代码的下面。
<script> $(function() { // Set up tour $('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://files.cnblogs.com/files/hnyei/jq_zhezhaoyd.rar"]', popup: {content: '#walkthrough-4',type: 'tooltip',position: 'right'} }, {wrapper: '#footer p',popup: {content: '#walkthrough-5',type: 'tooltip',position: 'top'} }, {wrapper: '#main a span.STYLE1',popup: {content: '#walkthrough-6',type: 'tooltip',position: 'top'} }] }); // Show the tour $('body').pagewalkthrough('show'); }); </script>
你可能需要修改的地方,有4处:
1、wrapper后面的单引号 ' ' 里面的内容。它是代表在你的页面中寻址定位对应的元素(需要唯一定位!),你可以利用浏览器自带的“开发者工具”查找你的元素标签。
2、content是定义关联的内容元素,你如果是和我一样的小白,只改#walkthrough后面的数字吧,这和上面的代码中的内容ID是对应的哟。
3、type是引导显示的方式,有三种:tooltip(特指区域)、modal(全局,不特指区域)以及nohighlight(没有高亮)。我也不懂,你看着办。
4、position是你的内容在你高亮指定区域的相对位置,有四个(top、left、right、bottom)。别问我,我英文不好,只知道28个字母^_^
OK了,保存,刷新你的页面,看看效果吧!
===========================
原文、在线演示、源码下载,地址如下:
https://www.helloweba.com/view-blog-286.html
项目官网,gitbub源码:https://github.com/jwarby/jquery-pagewalkthrough
pagewalkthrough.js参数配置。
参数 | 描述 | 默认值 |
popup | 弹出提示引导层 | |
wrapper | 当前引导对应的元素位置 | |
type | 弹出方式(tooltip和modal以及nohighlight) | tooltip |
position | 弹出层位置(top,left, right or bottom) | bottom |
offsetHorizontal | 是否水平显示 | 0 |
offsetVertical | 是否垂直显示 | 0 |
width | 弹出层宽度 | 320 |
contentRotation | 是否跳过 默认不跳过 | 0 |
autoScroll | 是否自动滚动 | true |
scrollSpeed | 滚动速度 单位毫秒 | 1000 |
lockScrolling | 是否锁定滚动 默认不锁 | false |
onEnter | 当按enter回调 | null |
onLeave | 当结束回调 | null |
发表评论(不用注册哟!)