在定制AjaxControlToolkit(1):使一个CalendarExtender对应N个TextBox 的最后,为了展示主题,我贴了一张截图,也许大家注意到了,我的截图的右下 角有一个“清除”按钮,这就是本文要介绍的更改。
在我们的项目中,大多数的录入日期的文本框是不允许用户手输的,只能通 过 点击--弹出日期选择框的方式选择,这样可以避免烦人的检查动作,当然也可以 用MaskedEdit过滤,不过感觉没必要,有日期控件了,就不弄那么复杂了,另外 ,项目中大部分代码是以前写的,当时没有MaskedEdit可用,一直以来使用只读 的办法来限制日期文本框。
由于文本框只读,所以只要用户一旦选择了某个日期,就没办法使这个文本 框 变空了,大多数情况下,这并不是问题,但是在少数页面,这一点相当烦人,更 重要的是,以前的控件有这个功能,用户已经习惯了这样操作,现在突然告诉用 户你没办法清空它,这不怎么有说服力。而且从系统设计的角度讲,那个文本框 本来就是允许为空的,而且默认就是空的,后来选择了日期以后,就再也没办法 使它恢复到空值状态,也不怎么说得过去。
因此我觉得有必要给CalendarExtender增加清除功能,使它能够清空目标文 本 框。
清空的动作倒是非常简单,但是要把它正确地显示出来比较棘手。首先,要 了 解CalendarBehavior类的展示方法:首先有一个_popupDiv属性,它是整个控件 的 载体,其它的控件都附加在这个div之上;而底部显示“今天”的部分,是直接 附 加在总载体_popupDiv上的,因为本来底部只有它一个控件,它当然可以这样做 , 但是现在要在它右侧增加一个按钮,就要改变一下这种行为: 增加一个_footer 层 作为底部控件的载体, 把今天日期作为子控件附加到_footer上面, 再增加一个 _clearButton控件, 也附加到_footer上面. 实现这一流程的代码如下:
1. 增加私有属性:
this._clearButton = null; this._footer = null;
2. 在_buildFooter方法中, 改写_today的展示方式:
_buildFooter: function() { /// <summary> /// Builds the footer for the calendar /// </summary> this._footer = $common.createElementFromTemplate({ nodeName: "div", properties: { id: this.get_id() + "_footer" }, cssClasses: ["ajax__calendar_footer"] }, this._popupDiv); var todayWrapper = $common.createElementFromTemplate({ nodeName: "div" }, this._footer); this._today = $common.createElementFromTemplate({ nodeName: "div", properties: { id: this.get_id() + "_today", mode: "today" }, events: this._cell$delegates, //cssClasses: ["ajax__calendar_footer", "ajax__calendar_today"] cssClasses: ["ajax__calendar_today"] }, todayWrapper); var clearWrapper = $common.createElementFromTemplate({ nodeName: "div" }, this._footer); this._clearButton = $common.createElementFromTemplate({ nodeName: "div", properties: { id: this.get_id() + "_clearButton", mode: "clear" }, events: this._cell$delegates, cssClasses: ["ajax__calendar_clear"] }, clearWrapper); },
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索控件
, footer
, this
, 日期
, nodename
, AjaxControlToolkit
, 一个
, CalendarExtender
只读文本框
,以便于您获取更多的相关知识。