问题
今天同事项目发生问题
日期框严重偏离 而且 每台电脑 每种浏览器偏移距离不一致 IE甚至往左偏移
分析
博主查看元素属性 发现 该日期框为动态生成top left绝对定位而成 遂查看该库源码
trigger: function() {
this.$trigger = this.options.trigger instanceof $ ? this.options.trigger : $(this.options.trigger);
var _this = this,
$this = _this.$element,
post = _this.$trigger.offset(),
offs = _this.options.offset;
$this.addClass('calendar-modal').css({
left: (post.left + offs[0]) + 'px',
top: (post.top + _this.$trigger.outerHeight() + offs[1]) + 'px',
zIndex: _this.options.zIndex
});
_this.$trigger.click(function() {
$this.show();
});
$(document).click(function(e) {
if (_this.$trigger[0] != e.target && !$.contains($this[0], e.target)) {
$this.hide();
}
});
},
通过源码发现 初始化的时候就已经通过trigger触发元素的位置生成了固定位置 并且在触发元素单击的时候 仅仅只是显示了该日期框而未动态计算其位置 这就导致初始化过后若是trigger元素位置有变动 必将导致日期框偏离 由于同事的控件是使用紧跟着元素后就渲染 导致了问题发生
解决
由于以上问题 需要在页面渲染完毕 trigger元素位置不再变动后再进行该日期控件的渲染
在 $(document).ready 事件内进行渲染 后又发现导航栏等渲染也在该事件内 导致再次发生偏移 后加上setTimeout推至队列最底部并加适当延时
以上解决方案为临时解决方案 时间有限并不完美 可以在触发的时候动态改变日期框位置即可
$(document).ready(function(){
setTimeout(function(){
$('#dd').calendar({
//...option
});
}, 500)
})
总结
提供库或者工具的时候 需要考虑到各种情况 不应够用能够实现即可 同时使用第三方库或工具的时候 也不可完全信任 使用之前有条件可以了解实现原理细节等等