在定制AjaxControlToolkit(1):使一个CalendarExtender对应N个TextBox 的最后,为了展示主题,我贴了一张截图,也许大家注意到了,我的截图的右下角有一个“清除”按钮,这就是本文要介绍的更改。
在我们的项目中,大多数的录入日期的文本框是不允许用户手输的,只能通过点击--弹出日期选择框的方式选择,这样可以避免烦人的检查动作,当然也可以用MaskedEdit过滤,不过感觉没必要,有日期控件了,就不弄那么复杂了,另外,项目中大部分代码是以前写的,当时没有MaskedEdit可用,一直以来使用只读的办法来限制日期文本框。
由于文本框只读,所以只要用户一旦选择了某个日期,就没办法使这个文本框变空了,大多数情况下,这并不是问题,但是在少数页面,这一点相当烦人,更重要的是,以前的控件有这个功能,用户已经习惯了这样操作,现在突然告诉用户你没办法清空它,这不怎么有说服力。而且从系统设计的角度讲,那个文本框本来就是允许为空的,而且默认就是空的,后来选择了日期以后,就再也没办法使它恢复到空值状态,也不怎么说得过去。
因此我觉得有必要给CalendarExtender增加清除功能,使它能够清空目标文本框。
清空的动作倒是非常简单,但是要把它正确地显示出来比较棘手。首先,要了解CalendarBehavior类的展示方法:首先有一个_popupDiv属性,它是整个控件的载体,其它的控件都附加在这个div之上;而底部显示“今天”的部分,是直接附加在总载体_popupDiv上的,因为本来底部只有它一个控件,它当然可以这样做,但是现在要在它右侧增加一个按钮,就要改变一下这种行为: 增加一个_footer层作为底部控件的载体, 把今天日期作为子控件附加到_footer上面, 再增加一个_clearButton控件, 也附加到_footer上面. 实现这一流程的代码如下:
1. 增加私有属性:
this._footer = null;
2. 在_buildFooter方法中, 改写_today的展示方式:
/// <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);
},
这里我给它指定了一个新的css属性ajax__calendar_clear, 允许用户任意定义这个按钮的样式. 并且将它的事件也绑定到统一的_cell$delegates中, 为此要给_cell_onclick方法增加一个处理器:
this.get_targetElement().value = "";
this._blur.post(true);
this.raiseDateSelectionChanged();
break;
进行到这里, 最重要的外观"清除" 两个字还没看到, 所以显然工作还没有完成: 然后在_performLayout方法中把清除这两个字附加上去:
this._clearButton.appendChild(document.createTextNode("\u6E05\u9664"));
}
这里我用了\u的方法表示汉字, 因为如果直接写汉字的话, 至少在我的环境中看来是乱码, 所以要直接用unicode码表示. 另外, 我顺便把today和最上方显示年月的地方的显示格式改了改, 默认的先月后年的显示方法实在不符合中国人的习惯. 这两个显示格式都在_performLayout方法中.
最后在dispose方法中, 把清除按钮清理掉:
$common.removeHandlers(this._clearButton, this._cell$delegates);
this._clearButton = null;
}
这就差不多算是大功告成了, 除了底部显示了两行, 比较丑以外......
显示两行显然是不能接受的, 所以打开Calendar.css , 继续修改.
因为要把今天的日期和清除按钮放在同一行, 所以先修改.ajax__calendar_today和.ajax__calendar_footer:
.ajax__calendar_today {cursor:pointer;padding-top:3px; float:left;}
然后增加一个ajax__calendar_clear类:
{
font-weight: bold;
color:Blue;
text-decoration:underline;
cursor:pointer;
float:right;
padding-top:3px;
}
现在就真的大功告成了.
---------------------------------------------
作者:夏狼哉
博客:http://www.cnblogs.com/Moosdau
如需引用,敬请保留作者信息,谢谢