jquery Calendar 日期框偏离问题分析及解决

问题

今天同事项目发生问题

日期框严重偏离 而且 每台电脑 每种浏览器偏移距离不一致 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)
})

 

总结

提供库或者工具的时候 需要考虑到各种情况 不应够用能够实现即可 同时使用第三方库或工具的时候 也不可完全信任 使用之前有条件可以了解实现原理细节等等