网页引导-Jquerypagewalkthrough.js
效果预览
碰见网页引导功能的需求,于是收到了Jquerypagewalkthrough.js这个插件,在github上下载到源码,英文渣很尴尬,找啊找啊找。终于找到篇中文的博客教程:来源helloweba.com 作者:月光光
第一步 在需要引导的页面head部分加入css和js
1 | <link rel="stylesheet" href="./css/jquery.pagewalkthrough.css"> |
第二步 在body的最后加上引导的内容
1 | <style type="text/css"> |
第三步 jquery调用pagewalkthrough
steps是一个数组,定义每一步引导调用的内容,参数wrapper定义了当前引导对应的元素位置(wrapper中的值就是css选择器),参数popup定义弹出提示引导层,参数content定义关联的内容元素,参数type定义弹出方式,包括tooltip和modal以及nohighlight三种方式,参数position定义了弹出层位置,包括top,left, right or bottom。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43<script>
$(function() {
$('body').pagewalkthrough({
name: 'introduction',
steps: [{
popup: {
content: '#walkthrough-1',
type: 'modal'
}
}, {
wrapper: '.page-title ul',
popup: {
content: '#walkthrough-2',
type: 'tooltip',
position: 'bottom'
}
}, {
wrapper: '.avatar',
popup: {
content: '#walkthrough-3',
type: 'tooltip',
position: 'right'
}
}, {
wrapper: '.footer-inner',
popup: {
content: '#walkthrough-4',
type: 'tooltip',
position: 'top'
}
}, {
wrapper: '.fa.fa-sun-o',
popup: {
content: '#walkthrough-5',
type: 'tooltip',
position: 'left'
}
}]
});
$('body').pagewalkthrough('show');
});
</script>
代码下载demo.zip
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号