The Official Microsoft ASP.NET Site上有一个很强大的控件AJAX Control Toolkit,其功能非常完整,几乎涵盖了表现层方面各种应用,使用也很方便,有中文详细支持,能给程序员很大帮助。

我现在使用的其中一款控件叫做CalendarExtender,其实是一个DatePicker(日期选择器),这个控件可以直接在Input控件上添加「扩展程序 」,就完成了所有工作。

偏移

让我意外的是,这个控件在我的页面上工作时候样式似乎有些不正常。

页面漂移了!我仔细检查了FireBug,发现下面的样式中的padding影响了其td。(页面可不是我设计的```)

Firebug

如果修改CSS,就带来了大量的页面需要修改class/id,所以我只能修正CalendarExtender。(话说人家jQuery在这儿丝毫不受影响,全部元 素都覆盖了样式,AJAX Control Toolkit在样式上还是不如jQuery)

我在CalendarExtender外面包了一层div,再覆盖CalendarExtender的td属性。

Html代码:

<div>
<asp:TextBox ID="TbBirthday" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="TbBirthday_CldEx" runat="server" Enabled="True" TargetControlID="TbBirthday" FirstDayOfWeek="Monday" Format="yyyy-MM-dd" PopupPosition="BottomRight">
</cc1:CalendarExtender></div>

CSS代码:

/*bugs for CalendarExtends*/
.content .table .calendar td {/*.calender td 前的类是我网页中的上层元素*/
margin: 0px;
padding: 0px;
}

这样一来,就可以解决这个问题了。

修正

最后,附送一个汉化控件的技巧:其实下载后,已经有语言包在下载包里面,之所以没有启用中文,是因为没有打开ScriptManager的全球化控制,把Script Manager的EnableScriptGlobalization改为true即可。

Asp.NET代码:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True">
</asp:ScriptManager>

原文链接: https://blog.alswl.com/2009/08/ajaxcontroltoolkit-amendment-in-calendarextender-styles/
3a1ff193cee606bd1e2ea554a16353ee
欢迎关注我的微信公众号:窥豹

Comments

comments powered by Disqus