你应该学习的4种ASP.NET AJAX JavaScript UI方法
原文地址:http://encosia.com/2008/01/09/4-aspnet-ajax-javascript-ui-functions-you-should-learn/
以前我写的关于ASP.NET AJAX的文章很少谈起客户端功能,本文将仔细的看看ASP.NET AJAX中的JavaScript UI工具函数。这些方法非常有用,因为它们抽象了大多数有关浏览器兼容性的问题,为我们提供了一套友好的,连续的API。
特别的,我将向你展示一些使用addCssClass, getBounds, getLocation, 和 setLocation的例子,完成一些客户端UI任务。
轻松的添加和删除CSS类
一个被忽视的CSS特征是对同一个元素直接应用多个CSS类。例如,你可能参加过在线测试,测试结果中,正确的回答使用绿色显示,而错误的回答使用红色显示。你可以使用下面这个方法做到:
.answerResult { font-weight: bold; }
.correct { color: green; }
.incorrect { color: red; }
Answer #1: <span class="answerResult correct">correct</span>
Answer #2: <span class="answerResult incorrect">incorrect</span>
这是一个非常漂亮的解决方法。标记是语义上的,为了避免重复,将高亮(highlight)与基本类型中分开。然而,如果我们需要在客户端操作它们,还有很多工作要做。
幸运的是,ASP.NET AJAX客户端框架提供了工具函数以减轻复杂度。DomElement的addCssClass 和 removeCssClass正是我们需要的。假设span的ID为answerResult,这就是为正确回答动态添加CSS的全部:
Sys.UI.DomElement.addCssClass($get('answerResult'), 'correct');
我经常在产品中通过创建名字与某个域相关状态相同的CSS类来使用这种技术。于是,当显示数据时,只需简单的使用addCssClass添加一些上下文样式即可。
决定一个元素的大小
如果你从事客户端UI设计一段时间以后,你一定会遇到这种情况,如何在运行时决定HTML元素的大小?如果你需要兼容各种浏览器,那么你会发现这很枯燥。不是忍受痛苦,相反你可以使用DomElement的getBounds方法。它返回一个带有元素大小和位置的关联数组。
例如,如果你已经用一些数据填充了GridView,突然你想看看它的高度,如何才能做到?
var height = Sys.UI.DomElement.getBounds($get('GridView1')).height;
定位和移动元素
我想介绍的最后一个方法是getLocation 和 setLocation。毕竟,找到元素的大小之后,下一步你可能想它在哪里,或者想移动它。
例如,如果你想将一个div,SomeDiv,向右移动75px:
var loc = Sys.UI.DomElement.getLocation($get('SomeDiv'));
Sys.UI.DomElement.setLocation($get('SomeDiv'), loc.x + 75, loc.y);
把它放到一个循环中,你就得到了一个小的动画:
for (i = 1; i <= 75; i++)
{
Sys.UI.DomElement.setLocation($get('SomeDiv'), loc.x + i, loc.y);
}
结论
你可能不像使用$addHandler和base type extensions那样频繁使用它们。然而,当你需要它们时,如果你知道它们你将会非常高兴。