使 Microsoft Calendar.htc DHTML行为更好?

分享于 

10分钟阅读

Web开发

  繁體 雙語

问题

日期选取器和日历弹出框是用户准确选择所需日期的好方法。 大多数日期选择器的主要问题是一个新的窗口和初始化,这有一个负效果。 在本文中,我将利用当今网络上最好的日历- calendar.htc,并以更高效的方式公开。

解决办法是什么呢

在上一篇文章中,我演示了如何使用DHTML行为将常见功能公开为CSS样式,并简要讨论了元素行为和行为。 calendar.htc 是一个元素行为,它公开了一个完全功能的DHTML日历。 微软的日历非常棒,除了添加双点击事件和一点样式,我已经完成了。 我决定创建一个元素行为并嵌入 calendar.htc,而不是改变日历,这样我们就可以让日历保持相对未改变的状态。 包装器以弹出窗口的形式公开日历;弹出对象是一种特殊类型的重叠窗口,非常类似于。div / 图层 ,但与 图层 当失去焦点时它隐藏自身,并且可以通过选择元素。 以下是该控件的主要优点:

  • 完全封装的日期选择器/日历。
  • 快速加载。
  • 免疫弹出窗口拦截程序( 从脚本打开时)。
  • RAD。
  • 目标HTML控件或者 ASP.NET 网页控件。

要求

首先,我们需要声明名称空间,这是为了确保日历元素具有唯一的限定符。 HTML元素具有声明命名空间 astutemediaxmlns 属性。 设置这里属性允许我们在文档中使用前缀 astutemedia。 下一步是将日历元素导入到命名空间中 导入 指令。

<htmlxmlns:astutemedia><head><?import namespace="astutemedia" implementation="CalendarPopup.htc"></head>

在主文档中,导入指令实际上是实现元素行为的关键。 当浏览器开始处理" 导入 "指令,它等待在宏文件的内容完全下载之前完全下载。 处理这里指令的方式是将行为同步绑定到自定义元素的原因。

使用 CalendarPopup.htc

元素行为与 ASP.NET 服务器控件相同,但是所有的处理都是在客户端上完成的。 从代码片段 below 可以看到," Calendar1"有一个引用文本框的target 属性,该属性由选定的日期填充。 第二个元素不提供 target,而是通过 selectedDate 事件属性从 onDateSelected 事件获取选定的日期。

<inputclass="FormTextBox"id="Date1"type="text"maxlength="10"name="Date1"><astutemedia:calendarid="Calendar1"target="Date1"></astutemedia:calendar><astutemedia:calendarid="Calendar2"onDateSelected="alert(window.event.selectedDate)"></astutemedia:calendar>

创建行为

解决方案有四个文件:

  • Calendar.gif - 这是由行为呈现的日历 icon。
  • Calendar.htc - 这是微软行为的日历。
  • Calendar.htm - 这是弹出窗口的body,封装到HTML文件中。
  • CalendarPopup.htc - 这是主要的行为。

我们的行为有一个小的改变,允许我们双击日期来选择它。 这是通过添加一个名为 OnCalendarDblClick的定制事件来实现的。

<public:eventid="onCalendarDblClick"name="oncalendardblclick">

当日历的内部 table 得到双击时就会被调用。 我们引用 innerTableElem 并将 DblClick 函数附加到 ondblclick 事件。

window.document.all.innerTableElem.attachEvent("ondblclick", DblClick);

函数。

function DblClick()
{
 var oEvent = createEventObject();
 onCalendarDblClick.fire(oEvent);
}

我们在 Calendar.htm 文件中使用了这个事件。 在 OnCalendarDblClick 事件中,调用一个名为 CloseCalendar的函数,它公开所选日期的值。

oncalendardblclick="CloseCalendar()"

我们可以直接调用这个函数,因为我们可以直接从 CalendarPopup.htc 调用函数。 但是添加这个函数允许可读性。

function CloseCalendar()
{
 var val = Calendar.value;
 var id = parent.document.body.children[0].ParentId;
 parent.parent.document.getElementById(id).Unload(val);
}

CalendarPopup.htc 拥有主要功能。 它将日历公开为自定义元素,并将日期选取器生成为弹出窗口。 我们首先声明组件。

<public:componenttagname="Calendar"><public:defaultsviewLinkContent="true"/> 
 <public:propertyname="Version"value="Calendar 1.0"/><public:propertyname="Target"value=""/><public:eventid="onDateSelected"name="ondateselected"><public:methodname="Unload"/><public:attachevent="oncontentready"onevent="Init()"/></public:component>

从 上面 代码示例中可以看到,我们公开 target 属性,并给它一个空字符串的默认属性。 我们还公开了一个名为 onDateSelected的事件,该事件在弹出时被调用。 Unload 方法由 Calendar.htm 文件中的CloseCalendar 函数调用。 然后在保存页面( 我们要使用行为的页面)的事件上附加" Init"函数,事件为 onContentReady,当保存页面上的内容完全加载时,该事件会被触发。

Init 函数首先检查是否设置了 target 属性,如果将 ondblclick 事件附加到元素,则为。 这将允许双击元素以显示日历。 然后我们创建弹出窗口,并用 Calendar.htm 文件填充它。

function Init()
{
 // Check to see if there is a target element.if(Target!= null && Target!= "")
 {
 // Add a double click to the target elem, to show the calendar winDoc.getElementById(Target).attachEvent("ondblclick", ShowPopup);
 }
 // Create a popup object popup = win.createPopup();
 popupBody = popup.document.body;
 // Add the scriptlet to the popups body. popupBody.innerHTML = "<object id='cal' width='100%' 
 ParentId='" + id + "' height='100%' type='text/x-scriptlet' 
 data='Calendar.htm'></object>"; 
}

Unload 函数激发 onDateSelected 事件,如果目标存在,则用选定的日期值填充它。 然后隐藏弹出菜单。

function Unload(val)
{
 // Create a new event.var e = createEventObject();
 // Expose the selected value with the event. e.selectedDate = val;
 // Fire the event. onDateSelected.fire(e);
 if(Target!= null && Target!= "")
 {
 // Find the target in the parent document and set the value. winDoc.getElementById(Target).value = val;
 }
 // Hide the popup. popup.hide();
}

最后一个函数是 ShowPopup 函数;当单击日历 icon 或者双击目标元素时,该函数显示弹出窗口。 它将弹出 22像素放置在点击/双击发生的位置。 它也确保它不会与浏览器窗口的边界冲突。

function ShowPopup()
{
 var wEvent = win.event;
 var winDocBody = winDoc.body;
 var popupWidth = 320;
 var popupHeight = 250;
 // Set the x and y from where the mouse clicks. x = wEvent.x + 22;
 y = wEvent.y - 22;
 // Check to see if the popup goes out of bounds.if (x + popupWidth> winDocBody.clientWidth)
 x = wEvent.x - (popupWidth + winDocBody.scrollLeft + 22);
 else 
 x += winDocBody.scrollLeft;
 if (y + popupHeight> winDocBody.offsetHeight)
 y = wEvent.y - (popupHeight + winDocBody.scrollTop + 22);
 else 
 y += winDocBody.scrollTop;
 popupBody.style.border = "1px solid #333333";
 // Show the popup. popup.show(40, -80, popupWidth, popupHeight, document.body); 
}

最后,我们输出日历 icon 并添加一个 onClick 事件来显示弹出窗口。

<bodyid="TheBody"><imgsrc="Calendar.gif"width="16"height="15"style="cursor:hand"onclick="ShowPopup()"title="Click to show calendar"align="absMiddle"></body>

结束语

这种行为使得日历和日期选取器成为一个非常容易解决的问题。 元素行为是实现和封装通用功能的好方法,并且使用起来非常迅速。 如果使用 ASP.NET,可以在服务器控件中包装元素行为,以便在服务器端公开所选日期。

链接和资源

下载和演示


CAL  micr  Microsoft  日历  DHT  Dhtml  
相关文章