使用HTC技术调用jQuery datequicker

redhacker

浏览: 495887 次
性别:
来自: 北京

最近访客更多访客>>

fwqerhg

JianCaesar

zhangyanpucm

从越其右

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web基础

htc jquery

背景：

公司的ERP是06年左右开发的，当时主流的浏览器是IE5,IE6,所以ERP页面开发中用到了当时比较时髦的技术HTC，关于HTC，你可以参考：http://www.blueidea.com/tech/web/2003/1227.asp。

web浏览器技术时至今日已经百花齐放，有IE8,IE9,firefox,Chrome等。

需求：

很长一段时间，公司的日期popup组件需要在IE7以上的浏览器上设置对URL安全访问允许，才能正常显示，原因是这个日期popup的实现使用了<object>这个html标签，为了解决这个问题，我在上篇日志已经给出了解决方案。但是上面的方案造成整个ERP的所有用到日期组件的地方都要进行代码修改，因此，开发人员希望针原有实现进行替换，而不影响日期组件的引用，即不替换日期组件而不修改ERP程序。

分析和解决方案：

通过查看原有日期组件的引用方式是采用HTC技术，这是一种IE上专有的技术，我们通过下面的方式可以将jquery datequicker封装成一个HTC:

1、在html标记中加入命名空间：

<html xmlns:astutemedia>

2、在页面中引入标签实现文件：

<?import namespace="astutemedia" implementation="CalendarPopup.htc">

3、在日期标签<input>后面加入自定义标记calendar，如下所示：

start Date: <input type="text" id="startDate" />
<astutemedia:calendar id="Calendar1" target="startDate"></astutemedia:calendar>

4、在CalendarPopup.htc我们实现calendar这个标签，并对id为"startDate"的这个<input>对象添加行为。以下是实现代码：

<!-- ---------------------------------------------------------------------
//	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>

在上面的代码中声明了一个Calendar标签，这个标签定义了两个属性Target和Targets,对当前标签的oncontentready事件定义了一个Init函数。

当页面执行到<astutemedia:calendar>标记时，该函数就会被调用，从而实例化一个datequicker组件。

实例化的这个datequicker组件的显示监听事件有三个：onfocus,button,both，这里将shownOn指定为both，就是说当id为startDate的input对象得到焦点时，以及点击id为startDate的input对象后面的button时，显示日期组件。

教训：

在关于如何让input对象点击或双击显示日期组件的问题上，我鼓捣了好久，后来才发现了showOn就是指定事件监听的地方，并且固定显示日期组件的事件只有这么三种，才想到自己在日期输入框上企图加入事件，再通过事件触发显示日期组件，在思路上就是不对的，因为，设计者已经考虑到了这种情况，只需要进行设置即可。

后来，通过读datequicker自带的docs才知道了showOn这个配置，问题才豁然开朗。

得到的教训就是，对于任何技术的研究，虽然搜索引擎是条捷径，但如果首先研究该技术的官方文档，将会省去走许多弯路。

datepicker.rar (127.7 KB)
描述: 本文源码
下载次数: 6

0
顶

0
踩

分享到：

jdk6下开发webservice示例 | Oarcle ADF Security下配置不受保护的JSP ...

2011-12-07 22:23
浏览 2034
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论