先说第一个问题,其实,说是问题,也不算是问题,而是FireFox的一个自身的特色,使得datepicker在某些特殊的情况下没有达到应有的效果。
首先,先来看下下面这个页面的布局
$(document).ready(function(){
$('#date').datepicker();
})
</script>
<style>
.outer{
width:500px;
height:400px;
border:1px solid blue;
overflow:auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
this is a test<br />
<input type="text" id="date" />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
this is a test<br />
!!!!!!!!!!!!!!!!!!!!!111
</div>
</div></body>
首先我们使用Chromes或者IE执行如下操作步骤:点击input框--(出现日期下拉)--直接用鼠标左键拖动外部容器的这个滚动条。你会发现下拉的日期控件没有了,并且,input上的焦点没有了,这时,我们再点击input框,日期框又会弹出了。但是,使用FireFox,就会发现,拖动滚动条时,input的焦点并没有失去,但是由于触发了日期控件外的鼠标事件,日期框消失了,但是,再点input框就不会弹出了。我们必须先点击别处,让input框的焦点释放后重新点击input框才能让日期框出来。这一点小小的区别,造成了datepicker在FireFox下的不同。这个问题是我在工作中的一个项目测试的过程中,被同事的测试用例搞出来的,好犀利啊。
另外,上面这个例子出现了另一个datepicker的不足,那就是点出日历框后,滚动鼠标滚动轴,使得内部容器中的内容滚动,但是,日历框的位置并没有跟着内容的滚动而改变,这就好像是被钉在了页面上一样。其实,这个问题的原因是因为datepicker这个日历框部分是插入在整个body的最下面的。我们在外部的容器使用了overflow:auto,超出显示范围的内容部分被隐藏了,可以通过滚动条来移动。但是,datepicker的下拉框是在这个容器外边的,它是通过position:absolute来进行定位到应该显示的位置的(简单的证据就是如果我们把.outer定义的很小,如果我们点击input,整个日期下拉框是显示出来的,而不是被包在outer中的),因此,我们的鼠标在outer中滚动,整个默认事件,只会让包在outer中的内容发生变化,而在外侧的容器不会变的。
当然,这个小问题看似没什么。但是,在一些比较特殊的需求中,这样就不是我们想要的效果了。至于修正这两个方法,大致有二,一是修改datepicker的源码,修改鼠标事件来满足你的需要。当然这个方法比较麻烦,你需要花时间来阅读源码。另外一种就是将outer部分改成iframe,这样,内部的内容被放到另一个页面中去,这样,datepicker也就会放到iframe中的body中了。