介绍
Sys.UI命名空间下包含与UI相关的类，像控件、事件和Microsoft AJAX Library里的UI属性之类的。快捷方法就是用简短的代码调用某个方法。
关键
１、Sys.UI.DomElement Class
·Sys.UI.DomElement.addCssClass(元素, "CssClass名");
·Sys.UI.DomElement.containsCssClass(元素, "CssClass名"); （返回值为元素是否包含有指定的CssClass名）
·Sys.UI.DomElement.getBounds(元素); (返回值为JSON对象，其内field分别为：x,y,width,height；分别代表元素的x坐标，y坐标，宽，高)
·Sys.UI.DomElement.getLocation(元素); (返回值为JSON对象，其内field分别为：x,y；分别代表元素的x坐标，y坐标)
·Sys.UI.DomElement.removeCssClass(元素, "CssClass名");
·Sys.UI.DomElement.setLocation(元素, x坐标, y坐标);
·Sys.UI.DomElement.toggleCssClass(元素, "CssClass名");
2、Sys.UI.DomEvent Class
·Sys.UI.DomEvent.addHandler(元素, "事件名称", 事件处理器);
·Sys.UI.DomEvent.addHandlers(元素, "事件名称", {"事件名称1", 事件处理器1, "事件名称2", 事件处理器2, ...});
·Sys.UI.DomEvent.clearHandlers(元素);
·Sys.UI.DomEvent.removeHandler(元素, "事件名称", 事件处理器);
·该类下的Field
·altKey // 是否是关联的alt键触发的事件？是true；否false
·button // Sys.UI.MouseButton枚举，用于指定当相关事件发生时，鼠标按键的状态
·charCode // 触发了事件的键的字符代码
·shiftKey // 发生事件时是否按下了Shift键
·clientX // 发生事件时鼠标的x坐标
·clientY // 发生事件时鼠标的y坐标
·ctrlKey // 发生事件时是否按下了Ctrl键
·offsetX // 发生事件时鼠标与触发事件的对象之间的x偏移量
·offsetY // 发生事件时鼠标与触发事件的对象之间的y偏移量
·screenX // 发生事件时鼠标与用户屏幕之间的x偏移量
·screenY // 发生事件时鼠标与用户屏幕之间的y偏移量
·target // 触发事件的对象
·type // 被触发的事件的名称
3、快捷方法
·$get()相当于Sys.UI.DomElement.getElementById()
·$addHandler()相当于Sys.UI.DomEvent.addHandler()
·$addHandlers()相当于Sys.UI.DomEvent.addHandlers()
·$clearHandlers()相当于Sys.UI.DomEvent.clearHandlers()
·$removeHandler()相当于Sys.UI.DomEvent.removeHandler()
·$create()相当于Sys.Component.create()
·$find()相当于Sys.Application.findComponent()
示例
DomElement.aspx
<%
@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="DomElement.aspx.cs"
Inherits="ClientScripting_SysUI_DomElement" Title="Sys.UI.DomElement Class" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <style type="text/css">
.redBackgroundColor 
{}{ background-color:Red;
} .blueBackgroundColor {}{ background-color:Blue; } </style> <p> <input type="button" id="Button1" value="转换CssClass" /> </p> <p> <input type="button" id="Button2" value="移除CssClass" /> </p> <p> <input type="button" id="Button3" value="移动Lable1" onclick="Button3_onclick()" /> </p> <p> <asp:Label ID="Label1" runat="server" BackColor="Black" ForeColor="White" Text="Label1" Width="102px"></asp:Label> </p> <p> <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="500px" Height="300px"></asp:TextBox> </p> <script type="text/javascript" language="javascript"> /**//* $get()相当于Sys.UI.DomElement.getElementById() $addHandler()相当于Sys.UI.DomEvent.addHandler() $addHandlers()相当于Sys.UI.DomEvent.addHandlers() $clearHandlers()相当于Sys.UI.DomEvent.clearHandlers() $removeHandler()相当于Sys.UI.DomEvent.removeHandler() $create()相当于Sys.Component.create() $find()相当于Sys.Application.findComponent() */ // 给ID为“Button1”的元素增加“click”的事件处理，处理方法为toggleCssClassMethod $addHandler($get("Button1"), "click", toggleCssClassMethod); // 给ID为“Button2”的元素增加“click”的事件处理，处理方法为blueBackgroundColor $addHandler($get("Button2"), "click", removeCssClassMethod); // 给ID为“Button1”的元素增加增加名为“redBackgroundColor”的CssClass Sys.UI.DomElement.addCssClass($get("Button1"), "redBackgroundColor"); // 给ID为“Button2”的元素增加增加名为“blueBackgroundColor”的CssClass Sys.UI.DomElement.addCssClass($get("Button2"), "blueBackgroundColor"); function toggleCssClassMethod(eventElement) { // 元素eventElement.target是否有名为“redBackgroundColor”的CssClass if (Sys.UI.DomElement.containsCssClass(eventElement.target, "redBackgroundColor")) { // 将eventElement.target的CssClass变为“blueBackgroundColor” Sys.UI.DomElement.toggleCssClass(eventElement.target, "blueBackgroundColor"); } else { // 将eventElement.target的CssClass变为“redBackgroundColor” Sys.UI.DomElement.toggleCssClass(eventElement.target, "redBackgroundColor"); } } function removeCssClassMethod(eventElement) { // 移除eventElement.target的CssClass Sys.UI.DomElement.removeCssClass(eventElement.target, "blueBackgroundColor"); } var elementRef = $get("<%= Label1.ClientID %>"); // 获取元素的Bounds信息 var elementBounds = Sys.UI.DomElement.getBounds(elementRef); var result = ''; result += "Label1的x坐标 = " + elementBounds.x + "\r\n"; result += "Label1的y坐标 = " + elementBounds.y + "\r\n"; result += "Label1的宽度 = " + elementBounds.width + "\r\n"; result += "Label1的高度 = " + elementBounds.height + "\r\n\r\n"; // 获取元素的位置信息 var elementLoc = Sys.UI.DomElement.getLocation(elementRef); result += "Label1的坐标(x, y) = (" + elementLoc.x + "," + elementLoc.y + ")\r\n\r\n"; $get("<%= TextBox1.ClientID %>").value = result; function Button3_onclick() { result = ""; // 设置元素的位置（元素，x坐标，y坐标） Sys.UI.DomElement.setLocation(elementRef, 100, elementLoc.y + 100); elementLoc = Sys.UI.DomElement.getLocation(elementRef); result += "点击移动按钮后 - Label1的坐标(x, y) = (" + elementLoc.x + "," + elementLoc.y + ")\r\n"; $get("<%= TextBox1.ClientID %>").value += result; } </script></asp:Content>运行结果
1、单击“转换CssClass”按钮
该按钮的样式会在指定的两种CssClass间切换
2、单击“移除CssClass”按钮
该按钮的指定CssClass会被移除
3、TextBox显示为：
Label1的x坐标 = 276
Label1的y坐标 = 189
Label1的宽度 = 102
Label1的高度 = 15 Label1的坐标(x, y) = (276,189)
单击“移动Lable1”按钮后（Lable1的位置发生变化）TextBox显示为：
Label1的x坐标 = 276
Label1的y坐标 = 189
Label1的宽度 = 102
Label1的高度 = 15 Label1的坐标(x, y) = (276,189)
点击移动按钮后 - Label1的坐标(x, y) = (100,289)
DomEvent.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="DomEvent.aspx.cs" Inherits="ClientScripting_SysUI_DomEvent" Title="Sys.UI.DomEvent Class" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <p> 单击按钮后查看事件的详细信息 </p> <p> <input type="button" id="Button1" value="按钮(s)" accesskey="s" /> </p> <p> <asp:Label ID="Label1" runat="server"></asp:Label> </p> <p> </p> <p> 同时添加多个事件处理器 </p> &