bootstrap+swiper 全文图片预览
lopo1983 发表了文章 • 0 个评论 • 1864 次浏览 • 2016-08-16 15:26
var $index = $(this).index();
var temp = '<div class="modal fade" id="modalSwiper" tabindex="-1"><div class="modal-dialog modal-full" role="document"><div class="modal-content"><div class="modal-body"><div class="swiper-container" id="modSwiper"><div class="swiper-wrapper"></div><div class="swiper-pagination"></div><div class="swiper-button-prev iconfont icon-left"></div><div class="swiper-button-next iconfont icon-right"></div></div></div></div></div></div>';
$('body').append(temp);
var tempslider = '';
$('#product-info .pro-img img').each(function() {
tempslider += '<div class="swiper-slide"><img src="' + $(this).attr('src') + '" class="img-responsive center-block" alt="" /></div>';
});
$('#modalSwiper').find('.swiper-wrapper').append(tempslider);
var modalSwiper = $('#modSwiper').swiper({
autoplay: 4000,
speed: 1500,
loop: true,
pagination: '.swiper-pagination',
lazyLoading: true,
paginationClickable: true,
runCallbacksOnInit: true,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
});
$('#modalSwiper').modal('show');
$('#modalSwiper').on('shown.bs.modal', function() {
var a = $('#modalSwiper .modal-full').height(),
b = $('#modalSwiper .modal').height();
if(a < b) {
$('#modalSwiper .modal-full').css('transform', 'translate(0,' + (b - a) / 2 + ')')
}
modalSwiper.update(true);
modalSwiper.slideTo($index + 1,500);
});
$('#modalSwiper').on('hidden.bs.modal', function() {
$('#modalSwiper').remove();
})
}) 查看全部
$('#product-info .pro-img img').click(function() {
var $index = $(this).index();
var temp = '<div class="modal fade" id="modalSwiper" tabindex="-1"><div class="modal-dialog modal-full" role="document"><div class="modal-content"><div class="modal-body"><div class="swiper-container" id="modSwiper"><div class="swiper-wrapper"></div><div class="swiper-pagination"></div><div class="swiper-button-prev iconfont icon-left"></div><div class="swiper-button-next iconfont icon-right"></div></div></div></div></div></div>';
$('body').append(temp);
var tempslider = '';
$('#product-info .pro-img img').each(function() {
tempslider += '<div class="swiper-slide"><img src="' + $(this).attr('src') + '" class="img-responsive center-block" alt="" /></div>';
});
$('#modalSwiper').find('.swiper-wrapper').append(tempslider);
var modalSwiper = $('#modSwiper').swiper({
autoplay: 4000,
speed: 1500,
loop: true,
pagination: '.swiper-pagination',
lazyLoading: true,
paginationClickable: true,
runCallbacksOnInit: true,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
});
$('#modalSwiper').modal('show');
$('#modalSwiper').on('shown.bs.modal', function() {
var a = $('#modalSwiper .modal-full').height(),
b = $('#modalSwiper .modal').height();
if(a < b) {
$('#modalSwiper .modal-full').css('transform', 'translate(0,' + (b - a) / 2 + ')')
}
modalSwiper.update(true);
modalSwiper.slideTo($index + 1,500);
});
$('#modalSwiper').on('hidden.bs.modal', function() {
$('#modalSwiper').remove();
})
})
群规2018
lopo1983 发表了文章 • 0 个评论 • 3308 次浏览 • 2016-07-30 18:51
(为同城交流更为便捷,望大家自觉准守)。?
2.请尊重群内其他群员,上班期间尽量少聊与群主题无关的内容,恶意发大图刷屏(除了qq自带表情外其他的一律视为大图),上班时间请勿红包刷屏(禁令时间为: 周一 ~ 周五 8:30~12:00 13:00~17:30 ),发引导用户注册的AD链接直接飞机。
3.问问题前,请先baidu和查看api无果后再提问,问问题时 请尽量图文并茂,以节约时间!bootstrap相关的问题,请先申明版本号(呵呵!本群不再讨论兼容问题)。
4.若提问暂时没人回答,可到www.bsfans.com/wenda/ 留言或查看是否有和你一样的问题已被解答,不要随意@别人,你忙别人也忙!
5.群内禁止发黄赌毒 反党反社会的言论 图片
6.猎头、招聘请到www.bsfans.com/wenda/ 发布,若急需发布的可联系群主!?
以上规定违反者 送禁言套餐一份 若多次再犯送全球通单程机票一张!
? 查看全部
(为同城交流更为便捷,望大家自觉准守)。?
2.请尊重群内其他群员,上班期间尽量少聊与群主题无关的内容,恶意发大图刷屏(除了qq自带表情外其他的一律视为大图),上班时间请勿红包刷屏(禁令时间为: 周一 ~ 周五 8:30~12:00 13:00~17:30 ),发引导用户注册的AD链接直接飞机。
3.问问题前,请先baidu和查看api无果后再提问,问问题时 请尽量图文并茂,以节约时间!bootstrap相关的问题,请先申明版本号(呵呵!本群不再讨论兼容问题)。
4.若提问暂时没人回答,可到www.bsfans.com/wenda/ 留言或查看是否有和你一样的问题已被解答,不要随意@别人,你忙别人也忙!
5.群内禁止发黄赌毒 反党反社会的言论 图片
6.猎头、招聘请到www.bsfans.com/wenda/ 发布,若急需发布的可联系群主!?
以上规定违反者 送禁言套餐一份 若多次再犯送全球通单程机票一张!
?
Fixalert
lopo1983 发表了文章 • 0 个评论 • 1745 次浏览 • 2016-07-28 15:25
position: fixed;
max-width: 480px;
min-width: 100px;
width: auto;
height: auto;
overflow: hidden;
.alert {
.unbdr;
.close {
margin-left: 15px;
}
}
&[data-pos="br"] {
right: 5px;
bottom: 0;
}
&[data-pos="tr"] {
right: 5px;
top: 100px;
}
a {
display: block;
cursor: pointer;
&:hover {
color: inherit;
}
}
}less?function fixAlert(a, b, c, d) {
//a 位置 0 右下 1 右上 | b 类型 0警告 1 错误 2正确 | c 内容 | d 如果有 者为url
$('.alertbox').remove();
var pos, type;
var temp = '';
var tempChild = '';
if (a == 0) {
pos = 'br';
} else {
pos = 'tr';
};
if (b == 0) {
type = "warning";
} else if (b == 1) {
type = "danger";
} else {
type = "success";
};
if (d == undefined) {
d = "javascript:;"
};
temp += '<div class="alertbox" data-pos="' + pos + '"></a>';
$('body').append(temp);
tempChild += '<a class="alert ' + type + '" href="' + d + '"><button type="button" class="close" data-dismiss="alert"><span>×</span></button>' + c + '</a>';
$('.alertbox').append(tempChild);
$('.alert').on('closed.bs.alert', function() {
$('.alertbox').remove();
});
};js
?
fixAlert(1,0,'警告的内容','http://www.baidu.com') 查看全部
.alertbox {less?
position: fixed;
max-width: 480px;
min-width: 100px;
width: auto;
height: auto;
overflow: hidden;
.alert {
.unbdr;
.close {
margin-left: 15px;
}
}
&[data-pos="br"] {
right: 5px;
bottom: 0;
}
&[data-pos="tr"] {
right: 5px;
top: 100px;
}
a {
display: block;
cursor: pointer;
&:hover {
color: inherit;
}
}
}
function fixAlert(a, b, c, d) {js
//a 位置 0 右下 1 右上 | b 类型 0警告 1 错误 2正确 | c 内容 | d 如果有 者为url
$('.alertbox').remove();
var pos, type;
var temp = '';
var tempChild = '';
if (a == 0) {
pos = 'br';
} else {
pos = 'tr';
};
if (b == 0) {
type = "warning";
} else if (b == 1) {
type = "danger";
} else {
type = "success";
};
if (d == undefined) {
d = "javascript:;"
};
temp += '<div class="alertbox" data-pos="' + pos + '"></a>';
$('body').append(temp);
tempChild += '<a class="alert ' + type + '" href="' + d + '"><button type="button" class="close" data-dismiss="alert"><span>×</span></button>' + c + '</a>';
$('.alertbox').append(tempChild);
$('.alert').on('closed.bs.alert', function() {
$('.alertbox').remove();
});
};
?
fixAlert(1,0,'警告的内容','http://www.baidu.com')
mAlert
lopo1983 发表了文章 • 0 个评论 • 1593 次浏览 • 2016-07-28 15:23
//1 警告,2错误,3成功,4无状态 (c,a,b)c 状态 a 标题 b 内容 c为必填;
?
<a class="btn btn-success" onclick="mAlert(3,'成功的提示文字','成功')">成功</a>function mAlert(c, a, b, u) {
$('.modal').remove();
var m = '',
temp = '';
var mclass, micon;
var $md = $('#alertModal');
if (c == 1) {
mclass = ' warning';
micon = 'icon-war';
} else if (c == 2) {
mclass = ' danger';
micon = 'icon-erro';
} else if (c == 3) {
mclass = ' success';
micon = 'icon-suc';
} else if (c == undefined || c == 0) {
micon = 'icon-info'
};
temp += '<div class="modal fade' + mclass + '" id="alertModal" data-keyboard="false" tabindex="-1" role="dialog">';
temp += '<div class="modal-dialog modal-sm"><div class="modal-content">';
temp += '<div class="modal-body"><a class="close"></a><div class="media"><div class="media-left"><span class="iconplus ' + micon + '"></span></div>';
temp += '<div class="media-body media-middle"><h4>' + b + '</h4><p class="text-justify">' + a + '</p></div></div></div>';
temp += '<div class="modal-footer"><p><a class="btn btn-default btn-sm pull-right" data-dismiss="modal">确定</a></p></div>';
temp += '</div></div></div>';
$('body').append(temp);
$('#alertModal').modal({
show: 'true',
backdrop: 'static',
});
$('#alertModal').on('hidden.bs.modal', u)
}#alertModal {
.modal-header {
padding-top: 10px;
padding-bottom: 10px;
}
.modal-title {
color: @cwh;
margin: 0;
}
.modal-sm {
width: 400px;
}
.iconplus {
font-size: 96px;
}
.modal-body {
.btn {
padding-left: 25px;
padding-right: 25px;
}
p {
margin-bottom: 0;
}
.icon-erro {
color: @cre;
}
.icon-war {
color: @cye*0.9;
}
.icon-suc {
color: @cgr;
}
}
} 查看全部
//1 警告,2错误,3成功,4无状态 (c,a,b)c 状态 a 标题 b 内容 c为必填;
?
<a class="btn btn-success" onclick="mAlert(3,'成功的提示文字','成功')">成功</a>
function mAlert(c, a, b, u) {
$('.modal').remove();
var m = '',
temp = '';
var mclass, micon;
var $md = $('#alertModal');
if (c == 1) {
mclass = ' warning';
micon = 'icon-war';
} else if (c == 2) {
mclass = ' danger';
micon = 'icon-erro';
} else if (c == 3) {
mclass = ' success';
micon = 'icon-suc';
} else if (c == undefined || c == 0) {
micon = 'icon-info'
};
temp += '<div class="modal fade' + mclass + '" id="alertModal" data-keyboard="false" tabindex="-1" role="dialog">';
temp += '<div class="modal-dialog modal-sm"><div class="modal-content">';
temp += '<div class="modal-body"><a class="close"></a><div class="media"><div class="media-left"><span class="iconplus ' + micon + '"></span></div>';
temp += '<div class="media-body media-middle"><h4>' + b + '</h4><p class="text-justify">' + a + '</p></div></div></div>';
temp += '<div class="modal-footer"><p><a class="btn btn-default btn-sm pull-right" data-dismiss="modal">确定</a></p></div>';
temp += '</div></div></div>';
$('body').append(temp);
$('#alertModal').modal({
show: 'true',
backdrop: 'static',
});
$('#alertModal').on('hidden.bs.modal', u)
}
#alertModal {
.modal-header {
padding-top: 10px;
padding-bottom: 10px;
}
.modal-title {
color: @cwh;
margin: 0;
}
.modal-sm {
width: 400px;
}
.iconplus {
font-size: 96px;
}
.modal-body {
.btn {
padding-left: 25px;
padding-right: 25px;
}
p {
margin-bottom: 0;
}
.icon-erro {
color: @cre;
}
.icon-war {
color: @cye*0.9;
}
.icon-suc {
color: @cgr;
}
}
}
bsfanslib 持续更新中
lopo1983 发表了文章 • 0 个评论 • 1381 次浏览 • 2016-07-08 14:10
终于上线了 目前持续书写中!
项目连接地址项目地址coding.io
modal点击时 body变窄的解决办法
lopo1983 发表了文章 • 0 个评论 • 1846 次浏览 • 2016-03-13 17:02
3.x的body在改版为了有更好的UX效果 当modal-body 内容超长的时候 滚动鼠标即可直接滚动 不同于2.x的效果,须在modal-body上滚动鼠标,但是在做某些页面的时候body 的内容不超过100vh 就会出现强制滚动条,而这样的效果在某些时候回引起一些不必要的小麻烦 也就是页面重绘。
?
查看bs的源码后发现其在body中增加了一个class modal-open 和通过js 写入的padding-right 17px
从这里下手即可解决
?
解决办法1 简单暴力
修改js 源码
打开js源码 搜素 modal 后 再搜索 padding 就会发现一个
c.prototype.setScrollbar = function() {
var a = parseInt(this.$body.css("padding-right") || 0, 10);
this.originalBodyPad = document.body.style.paddingRight || "", this.bodyIsOverflowing && this.$body.css("padding-right", a + this.scrollbarWidth)
}注释掉这段js 即可完成;
[b]解决办法2 修改css[/b]
祭出css 大宝剑!important
增加如下css.modal-open {
overflow: initial !important;
}
.body{
adding-right: 0px !important;
}
?
? 查看全部
3.x的body在改版为了有更好的UX效果 当modal-body 内容超长的时候 滚动鼠标即可直接滚动 不同于2.x的效果,须在modal-body上滚动鼠标,但是在做某些页面的时候body 的内容不超过100vh 就会出现强制滚动条,而这样的效果在某些时候回引起一些不必要的小麻烦 也就是页面重绘。
?
查看bs的源码后发现其在body中增加了一个class modal-open 和通过js 写入的padding-right 17px
从这里下手即可解决
?
解决办法1 简单暴力
修改js 源码
打开js源码 搜素 modal 后 再搜索 padding 就会发现一个
c.prototype.setScrollbar = function() {
var a = parseInt(this.$body.css("padding-right") || 0, 10);
this.originalBodyPad = document.body.style.paddingRight || "", this.bodyIsOverflowing && this.$body.css("padding-right", a + this.scrollbarWidth)
}
注释掉这段js 即可完成;
[b]解决办法2 修改css[/b]
祭出css 大宝剑!important
增加如下css
.modal-open {
overflow: initial !important;
}
.body{
adding-right: 0px !important;
}
?
?
datetimepicker bs中错位问题
lopo1983 发表了文章 • 0 个评论 • 2060 次浏览 • 2016-02-26 10:17
datepicker position #363
但是这个文章并没有交代自己的版本号,而且我查找js源文件,也没有找到对应的字眼:507行、scrollTop等。
我个人是2015-11-16在github上下载的master分支:https://github.com/smalot/bootstrap-datetimepicker
根据更新日志,理论上应该是最新的版本?Minor release 2.3.5:Minor release 2.3.5
我找到的位置是在533行
现总结如下:
如果是2.3.5版本,尝试修改?bootstrap-datetimepicker.js?文件?533行?:top = top - containerOffset.top;//改为top = top// - containerOffset.top;
如果没有找到这一行,那么可能是旧版本,尝试在507~520行之间修改:top = top + document.body.scrollTop//改为top = top //+ document.body.scrollTop
如果用的min文件,那么也要相应改一下。讲到这里,再罗嗦一句:
min不知道用什么压缩工具的(估计是google压缩),变量名都改了,查找如下内容:
m=m-k.top;
把 "-k.top"去掉就好。
如果没有找到这个,搜索?top-left 这个字眼,翻一下后面,就可以看到了。
---------------------------------
更新:
俺发现不是这样的捏,min文件里面居然有+document.body.scrollTop这个字眼,果断去掉就好了。
? 查看全部
datepicker position #363
但是这个文章并没有交代自己的版本号,而且我查找js源文件,也没有找到对应的字眼:507行、scrollTop等。
我个人是2015-11-16在github上下载的master分支:https://github.com/smalot/bootstrap-datetimepicker
根据更新日志,理论上应该是最新的版本?Minor release 2.3.5:Minor release 2.3.5
我找到的位置是在533行
现总结如下:
如果是2.3.5版本,尝试修改?bootstrap-datetimepicker.js?文件?533行?:top = top - containerOffset.top;//改为top = top// - containerOffset.top;
如果没有找到这一行,那么可能是旧版本,尝试在507~520行之间修改:top = top + document.body.scrollTop//改为top = top //+ document.body.scrollTop
如果用的min文件,那么也要相应改一下。讲到这里,再罗嗦一句:
min不知道用什么压缩工具的(估计是google压缩),变量名都改了,查找如下内容:
m=m-k.top;
把 "-k.top"去掉就好。
如果没有找到这个,搜索?top-left 这个字眼,翻一下后面,就可以看到了。
---------------------------------
更新:
俺发现不是这样的捏,min文件里面居然有+document.body.scrollTop这个字眼,果断去掉就好了。
?
bootstrap tab 问题集锦
lopo1983 发表了文章 • 0 个评论 • 1725 次浏览 • 2016-02-26 10:07
?A:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
myChart1.resize();
myChart2.resize();
myChart3.resize();
})?
?
? 查看全部
?A:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {?
myChart1.resize();
myChart2.resize();
myChart3.resize();
})
?
?
bootsrap 扩展集合
lopo1983 发表了文章 • 0 个评论 • 2040 次浏览 • 2016-02-17 11:09
我也会不断跟进?
提交格式如下:
?
扩展插件名称:
扩展插件用途:
扩展插件地址:
扩展插件截图:(如果有 而且方便)
..................................................................................................... 查看全部
我也会不断跟进?
提交格式如下:
?
扩展插件名称:
扩展插件用途:
扩展插件地址:
扩展插件截图:(如果有 而且方便)
.....................................................................................................