JSF框架opermasks中时间组件兼容ie9的笔记心得

JSF框架opermasks中时间组件兼容ie9的笔记心得

转载请注明出处

去年年初项目刚刚开始的时候，ie9还没有出现，所以一切似乎很和谐的。但是自从ie9出现以后，各种不兼容的问题来了。

时间组件在ie9上面显示一半，树结构的节点点不开。各种问题铺面而来。

虽然说点击ie9的兼容模式可以实现组件的兼容。但是目前来看许多用户还是计算机文盲，或者半文盲状态，所以他们只有很少一部分人知道点击兼容去尝试。

没办法，最后交项目的时候了，只能硬着头皮改了。。。

因为我们前台用的是SSH所以时间组件选择的也是jquery的datepicker组件。于是我想把operamasks的时间组件换成datepicker

因为之前有换过fckediter的经验。但是那个也是参照别人的博客，所以想自己尝试一下换时间组件。但是发现不是那么简单的。

废话少说，下面让大家看看我的实现代码：

------------------------------------------------------我是华丽分割线--------------------------------------------------------------------

大家可以去我的CSDN下载我这个时间组件用到的js和css样式。因为如果没有好看的样式，功能再好的也是没人用的。

文件的地址是http://download.csdn.net/detail/devilzy2656/4264478；

下载之后，大家打开里面的html就可以看到显示的实例效果了。但是这是html中的我们还需要把他整合到operamasks中。所以我在项目的页面进行了如下的修改：

第一步：

首先在页面加入如下js方法，目的是让时间组件显示在页面上。
<script type="text/javascript">
//<![CDATA[
function createDateHTML(id) {
var date1 = $(document.getElementById(id));
createDateContainer(date1);
}
function createDateContainer(obj) {
obj.datepicker({
duration : '',
showTime : true,
constrainInput : false,
showButtonPanel : true,
showOn : "both",
buttonImage : "../../../../../javascript/jqueryDatePicker/calendar.gif",
buttonImageOnly : true,
changeYear : true,
changeMonth : true,
onClose : function(dateText, inst) {
starDateJsvar.setValue(document.getElementById('starDateInput').value);
},
time24h : true
});
}
/**
* 初始化时间插件
*/
function initTime() {
createDateHTML("starDateInput");
}
Ext.onReady(function() {
initTime();
});
//]]>
</script>

第二步：

将你所有填入时间组件的地方替换成如下的table，当然，这里的table只是为了样式的修改。
<table>
<tr>
<td>
<w:dateTimeField id="starDate" width="230" required="true" clientValidate="true"
requiredMessage="不能为空" hideLabel="true" hideTrigger="true" jsvar="starDateJsvar"
binding="#{coursePublishBean.startLineTime}" minuteStep="#{coursePublishBean.minuteStep}"
maxValue="#{coursePublishBean.newMaxDate}" minValue="#{coursePublishBean.newDate}"
maxText="您只可以发布最近#{coursePublishBean.days}天的课程，今天您能发布的最晚课程开始时间为：#{coursePublishBean.newSecendMaxDate} 24:00"/>
</td>
<td>
<input type="text" class="commonInput" id="starDateInput"
style="border: 0px;width: 0px;"/>
</td>
</tr>
</table>

第三部：

引入相应的js和css文件。这里的引入文件也在上面下载的html代码的头中有写明。

经过上面的步骤就完成了替换。

这里说一下整个流程。是首先在页面写了一个input组件，因为jquerydatepicker目前只能替换html标记的id组件，所以我们可以替换了input，但是整个operamasks的时间框架有很好的验证系统，我又不想丢失这么方便的用例，所以就采用了datepicker完成后的onclose函数，在其中添加了回填数据的方法。

这样，就彻底完成了整个流程

效果图如下：