- git地址
- 一个简单的应用
<link type="text/css" rel="stylesheet" href="jquery.pagewalkthrough.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script>
<div class="main">
<div class="w1"></div>
<div class="w2"></div>
<div id="walkthrough-2">
jQuery插件库LOGO,点击这里可以跳转到网站首页。
</div>
<div class="w3"></div>
<div id="walkthrough-3">
第二部演示
</div>
<div class="w4"></div>
<div id="walkthrough-4">
第三部演示
</div>
<div id="walkthrough-5">
第四部演示
</div>
<img src="img/jq22.jpg">
</div>
$(function() {
// 设置参数
$('body').pagewalkthrough({
name: 'introduction',
steps: [{
popup: { //定义弹出提示引导层
content: '#walkthrough-1',
type: 'modal'
}
},
{
wrapper: '.w1',
//当前引导对应的元素位置
popup: {
content: '#walkthrough-2',
//关联的内容元素
type: 'tooltip',
//弹出方式(tooltip和modal以及nohighlight)
position: 'bottom' //弹出层位置(top,left, right or bottom)
}
},
{
wrapper: '.w2',
popup: {
content: '#walkthrough-3',
type: 'tooltip',
position: 'bottom'
}
},
{
wrapper: '.w3',
popup: {
content: '#walkthrough-4',
type: 'tooltip',
position: 'top'
}
},
{
wrapper: '.w4',
popup: {
content: '#walkthrough-5',
type: 'tooltip',
position: 'top'
}
}]
});
// 一步一步显示引导页
$('body').pagewalkthrough('show');
});
复制代码
- 在使用bootstrap项目中遇到的问题
首先,任何情况下margin都不包含在height和width内。而padding与边框是否包含在height 和width中则有两种情况。
(1)标准默认的盒子模型中 padding 是不包含在 height中,width中的
(2)css 有一个属性 box-sizing=content-box|border-box|inherit;
如果为 boder-box ,则padding包含在height中
如果为 content-box,则padding不包含在height中
如果为 inherit ,从父元素那里继承这个属性
复制代码
bootstrap中有一个设置 ,将所有的元素 的box-sizing = border-box 插件的设置是标准的盒子模型, 由此导致的问题就是引导的提示框的显示,高宽有问题。
处理方法:将提示框的css 设置为 content-box .overlay-hole{ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }