最近两个项目串着改,心很累,项目中也遇到了很多麻烦的问题:这里写几个总结
时间选择器15分钟一选
找了半天没找到,只能改起来源码:
//...
}) : n[x] = i, w.each([24, 60, 1], function(e, t) {
if(e == 1){
var a = w.elem("li"),
i = ["<p>" + r.time[e] + "</p><ol>"];
w.each(new Array(t), function(t) {
if(t%15 == 0){
i.push("<li" + (n[x][C[e]] === t ? ' class="' + o + '"' : "") + ">" + w.digit(t, 2) + "</li>")
}
}), a.innerHTML = i.join("") + "</ol>", d.appendChild(a)
}else{
var a = w.elem("li"),
i = ["<p>" + r.time[e] + "</p><ol>"];
w.each(new Array(t), function(t) {
i.push("<li" + (n[x][C[e]] === t ? ' class="' + o + '"' : "") + ">" + w.digit(t, 2) + "</li>")
}), a.innerHTML = i.join("") + "</ol>", d.appendChild(a)
}
}), E()
}
//...
laydate-v5.0.9 日期与时间组件 MIT License 位置是 580行
并且,layDate是脱离jQuery的,纯js插件,并且,它兼容ie8及以上
fullcalendar插件
psms项目要求周日历插件,找了几个都不满足,最关键的是要求兼容ie8,然后在ie8上,样式和其他都满足,唯独事件出不来,这个bug定位了很久,最终都没有定位到,后来在ie8上被同事大牛打断点找到了,因为start和end时间在回调触发之的FullCalendar.js中,没有找到时间格式,由此可知,是时间格式不对。
//...
events: function(start, end, callback) {
$.ajax({
url: 'js/ceshi.json',
dataType: 'json',
data: {
start: start,
end: end
},
success: function(data) {
var events = [];
data.events.forEach(function(e){
events.push({
title: e.title,
start: new Date(e.start.replace("-","/").replace("-","/")), // will be parsed
end: new Date(e.end.replace("-","/").replace("-","/")), // will be parsed,
allDay:e.allDay
});
})
callback(events);
}
});
},
//... 在传值之前把时间的string改成/表示,目测是由于ie8上new Date("yyyy-mm-dd")是NaN
js扩展 forEach()方法
ie8上报对象属性不支持,也就是说Array的prototype上没有forEach方法,故此,要在Array上扩展forEach()方法
if ( !Array.prototype.forEach ) {
Array.prototype.forEach = function forEach( callback, thisArg ) {
var T, k;
if ( this == null ) {
throw new TypeError( "this is null or not defined" );
}
var O = Object(this);
var len = O.length >>> 0;
if ( typeof callback !== "function" ) {
throw new TypeError( callback + " is not a function" );
}
if ( arguments.length > 1 ) {
T = thisArg;
}
k = 0;
while( k < len ) {
var kValue;
if ( k in O ) {
kValue = O[ k ];
callback.call( T, kValue, k, O );
}
k++;
}
};
}
顺带一提,我为了兼容ie8,还加了js的ie判断
function isIE(){
if (window.navigator.userAgent.indexOf("MSIE")>=1)
return true;
else
return false;
}
补充:fullcalendar的官方文档以便查询
webuploader的flash兼容ie9
由于项目中上传按钮用的是
//添加上传按钮
uploader.addButton({
id: '#idpic,#phone,#reg,#bocCard,#photo',
innerHTML: '+'
});
然而,addButton在ie9上,使用的是flash按钮,通过右键查看元素可以看出,是object标签,这就是flash的东西,因此,
<label for="idpicwrap" upmore="Y" forTxt="idAtt" uptype="photo" upcount="2" onclick="return selectFile(this);" ><span class="star">*</span>身份证照片(需正反两张照片)
<span id="idpic" ></span>
</label>
<div id="idpicwrap"></div>
由于是flash,导致onclick绑定的selectFile方法并没有进
var fileSelect;
//定义点击事件
function selectFile(el) {
if (uploader.isInProgress()) {
layer.msg("附件正在上传!");
return false;
}
var upcount = $(el).attr("upcount");//上传数量
var forTxt = $(el).attr("forTxt");
var picAttTxt = $("#" + forTxt).val();
if(picAttTxt!='' && JSON.parse(picAttTxt).length >= upcount ){
layer.msg("该附件只能上传"+upcount+"个!");
return false;
}
fileSelect = el;
return true;
}
导致fileSelect对象为空,当上传成功后,图片回显示就放回不了地方,因此,导致了上传回显。
查找了很多帖子,都没有找到实际的办法,结果又被后端大牛找到了解决办法,那就是不用onclick,改用onmousedown,用来监听鼠标按下事件。
多图片预览swiper
兼容ie9的只能用swiper2版本,http://3.swiper.com.cn/api/index.html
fireFox不兼容css的zoom属性和mousewheel方法
$("#imgwrapper .swiper-slide img").on('mousewheel DOMMouseScroll', function(e) {
e.target.style.marginLeft="0 auto";
var zoom=parseInt(e.target.style.zoom, 10)||100;
if(e.originalEvent.wheelDelta){ //ie chrome
zoom+= e.originalEvent.wheelDelta/12;
if (zoom>0 && zoom <100) {
e.target.style.zoom = zoom+'%';
return false;
}
}else{// FF
var scaleStr = e.target.style.transform;
var scale = scaleStr.split("(")[1].split(")")[0];
scale -= e.originalEvent.detail/12;
if(scale > 0 && scale < 1.75 ){
e.target.style.transform = "scale(" + scale +")";
e.target.style.marginTop="0px";
e.target.style.transformOrigin= "left top ";
e.target.style.top="0px";
}
return false;
}
});