[b]背景:[/b]
公司的ERP是06年左右开发的,当时主流的浏览器是IE5,IE6,所以ERP页面开发中用到了当时比较时髦的技术HTC,关于HTC,你可以参考:[url]http://www.blueidea.com/tech/web/2003/1227.asp[/url]。
web浏览器技术时至今日已经百花齐放,有IE8,IE9,firefox,Chrome等。
[b]需求:[/b]
很长一段时间,公司的日期popup组件需要在IE7以上的浏览器上设置对URL安全访问允许,才能正常显示,原因是这个日期popup的实现使用了<object>这个html标签,为了解决这个问题,我在[url=http://redhacker.iteye.com/blog/1278652]上篇[/url]日志已经给出了解决方案。但是上面的方案造成整个ERP的所有用到日期组件的地方都要进行代码修改,因此,开发人员希望针原有实现进行替换,而不影响日期组件的引用,即不替换日期组件而不修改ERP程序。
[b]分析和解决方案:[/b]
通过查看原有日期组件的引用方式是采用HTC技术,这是一种IE上专有的技术,我们通过下面的方式可以将jquery datequicker封装成一个HTC:
1、在html标记中加入命名空间:
2、在页面中引入标签实现文件:
3、在日期标签<input>后面加入自定义标记calendar,如下所示:
[code]
start Date: <input type="text" id="startDate" />
<astutemedia:calendar id="Calendar1" target="startDate"></astutemedia:calendar>
[/code]
4、在CalendarPopup.htc我们实现calendar这个标签,并对id为"startDate"的这个<input>对象添加行为。以下是实现代码:
[code]
<!-- ---------------------------------------------------------------------
// Author: Redhacker (beanor@gmail.com)
// Date: 7/11/2011
// File: CalendarPopup.htc
// Description: This element behavior encapulates the calendar.htc and
// exposes it as a popup.
//
//-------------------------------------------------------------------- -->
<public:component tagname="Calendar">
<public:defaults viewLinkContent="true" />
<public:property name="Target" value="" />
<public:property name="Targets" value="" />
<public:attach event="oncontentready" onevent="Init()" />
</public:component>
<script>
function Init() {
var targetStr = "#" + Target;
$( targetStr ).datepicker({
showOn: "both",
buttonImage: "images/Calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true
});
}
</script>
[/code]
在上面的代码中声明了一个Calendar标签,这个标签定义了两个属性Target和Targets,对当前标签的oncontentready事件定义了一个Init函数。
当页面执行到<astutemedia:calendar>标记时,该函数就会被调用,从而实例化一个datequicker组件。
实例化的这个datequicker组件的显示监听事件有三个:onfocus,button,both,这里将shownOn指定为both,就是说当id为startDate的input对象得到焦点时,以及点击id为startDate的input对象后面的button时,显示日期组件。
[b]教训:[/b]
在关于如何让input对象点击或双击显示日期组件的问题上,我鼓捣了好久,后来才发现了showOn就是指定事件监听的地方,并且固定显示日期组件的事件只有这么三种,才想到自己在日期输入框上企图加入事件,再通过事件触发显示日期组件,在思路上就是不对的,因为,设计者已经考虑到了这种情况,只需要进行设置即可。
后来,通过读datequicker自带的docs才知道了showOn这个配置,问题才豁然开朗。
得到的教训就是,对于任何技术的研究,虽然搜索引擎是条捷径,但如果首先研究该技术的官方文档,将会省去走许多弯路。
公司的ERP是06年左右开发的,当时主流的浏览器是IE5,IE6,所以ERP页面开发中用到了当时比较时髦的技术HTC,关于HTC,你可以参考:[url]http://www.blueidea.com/tech/web/2003/1227.asp[/url]。
web浏览器技术时至今日已经百花齐放,有IE8,IE9,firefox,Chrome等。
[b]需求:[/b]
很长一段时间,公司的日期popup组件需要在IE7以上的浏览器上设置对URL安全访问允许,才能正常显示,原因是这个日期popup的实现使用了<object>这个html标签,为了解决这个问题,我在[url=http://redhacker.iteye.com/blog/1278652]上篇[/url]日志已经给出了解决方案。但是上面的方案造成整个ERP的所有用到日期组件的地方都要进行代码修改,因此,开发人员希望针原有实现进行替换,而不影响日期组件的引用,即不替换日期组件而不修改ERP程序。
[b]分析和解决方案:[/b]
通过查看原有日期组件的引用方式是采用HTC技术,这是一种IE上专有的技术,我们通过下面的方式可以将jquery datequicker封装成一个HTC:
1、在html标记中加入命名空间:
<html xmlns:astutemedia>
2、在页面中引入标签实现文件:
<?import namespace="astutemedia" implementation="CalendarPopup.htc">
3、在日期标签<input>后面加入自定义标记calendar,如下所示:
[code]
start Date: <input type="text" id="startDate" />
<astutemedia:calendar id="Calendar1" target="startDate"></astutemedia:calendar>
[/code]
4、在CalendarPopup.htc我们实现calendar这个标签,并对id为"startDate"的这个<input>对象添加行为。以下是实现代码:
[code]
<!-- ---------------------------------------------------------------------
// Author: Redhacker (beanor@gmail.com)
// Date: 7/11/2011
// File: CalendarPopup.htc
// Description: This element behavior encapulates the calendar.htc and
// exposes it as a popup.
//
//-------------------------------------------------------------------- -->
<public:component tagname="Calendar">
<public:defaults viewLinkContent="true" />
<public:property name="Target" value="" />
<public:property name="Targets" value="" />
<public:attach event="oncontentready" onevent="Init()" />
</public:component>
<script>
function Init() {
var targetStr = "#" + Target;
$( targetStr ).datepicker({
showOn: "both",
buttonImage: "images/Calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true
});
}
</script>
[/code]
在上面的代码中声明了一个Calendar标签,这个标签定义了两个属性Target和Targets,对当前标签的oncontentready事件定义了一个Init函数。
当页面执行到<astutemedia:calendar>标记时,该函数就会被调用,从而实例化一个datequicker组件。
实例化的这个datequicker组件的显示监听事件有三个:onfocus,button,both,这里将shownOn指定为both,就是说当id为startDate的input对象得到焦点时,以及点击id为startDate的input对象后面的button时,显示日期组件。
[b]教训:[/b]
在关于如何让input对象点击或双击显示日期组件的问题上,我鼓捣了好久,后来才发现了showOn就是指定事件监听的地方,并且固定显示日期组件的事件只有这么三种,才想到自己在日期输入框上企图加入事件,再通过事件触发显示日期组件,在思路上就是不对的,因为,设计者已经考虑到了这种情况,只需要进行设置即可。
后来,通过读datequicker自带的docs才知道了showOn这个配置,问题才豁然开朗。
得到的教训就是,对于任何技术的研究,虽然搜索引擎是条捷径,但如果首先研究该技术的官方文档,将会省去走许多弯路。