码迷,mamicode.com
首页 > 其他好文 > 详细

解决laydate时间日期插件定位溢出

时间:2017-05-02 13:50:29      阅读:339      评论:0      收藏:0      [点我收藏+]

标签:屏幕   手动   htm   document   blank   页面   box   img   像素   

laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap

laydate弹出层默认对齐input左边框

技术分享

 

但是当这个input比较靠页面右边的时候就会出现弹出层一部分溢出的问题

技术分享

 

这就需要修改插件JS文件,使其能够判断是否溢出并修复定位

找到JS文件laydate.js

首先找到设置定位代码

a.style.left=e.left+(b?0:c.scroll(1))+"px"

将其修改为

var boxWidth = parseFloat(a.clientWidth); // 日期对象宽度
var leftWidth = parseFloat(e.left); // 左偏移像素
var bodyWidth = parseFloat(document.body.clientWidth); // 屏幕可见区域宽度
if (boxWidth + leftWidth > bodyWidth) {
    var leftPX =bodyWidth - boxWidth;
} else {
    var leftPX = leftWidth;
}

a.style.left=leftPX+"px"

保存,强刷一下页面

正常情况

技术分享

靠近网页边缘时

技术分享

已经可以了,本人JS并不是很好,如有更好的方法欢迎分享!O(∩_∩)O

解决laydate时间日期插件定位溢出

标签:屏幕   手动   htm   document   blank   页面   box   img   像素   

原文地址:http://www.cnblogs.com/bndong/p/6795445.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!