新瓶旧酒ASP.NET AJAX(5) – 客户端脚本编程（Sys.UI命名空间下的类和快捷方法）

介绍
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()

4、其它请查看官方文档

示例
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>&nbsp;</p>
<p>
同时添加多个事件处理器
</p>
<p>
<input type=”button” id=”Button2″ value=”按钮2″ />
</p>
<p>
<asp:Label ID=”Label2″ runat=”server”></asp:Label>
</p>

<script type=”text/javascript” language=”javascript”>

// 给ID为“Button1”的元素增加“click”的事件处理器，处理方法为processEventInfo
addHandler(get(“Button1″), “click”, processEventInfo);

var ary =
[
// 以下为DomEvent类的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\' // 被触发的事件的名称
];

function processEventInfo(eventElement)
{
var result = ”;

for (var i = 0, l = ary.length; i < l; i++)
{
var arrayVal = ary[i];

if (typeof(arrayVal) !== ‘undefined’)
{
try
{
// 输出结果举例：eventElement.altKey
result += arrayVal + ” = ” + eval(“eventElement.” + arrayVal) + ‘<br/>’;
}
catch (e)
{
alert(e.message);
}
}
}

result += eventElement.target.id;

get(“<%= Label1.ClientID %>”).innerHTML = result;
}

</script>

<script type=”text/javascript” language=”javascript”>

// 给ID为“Button2”的元素增加多个事件处理器
Sys.UI.DomEvent.addHandlers
(
get(“Button2″),
{
click: processEventInfo,
mouseover: processEventInfo,
mouseout: processEventInfo
}
);

function processEventInfo(eventElement)
{
var result = ”;
result += eventElement.type;
get(“<%= Label2.ClientID %>”).innerHTML = result;
}

</script>

</asp:Content>

运行结果
1、单击“按钮(s)”（单击位置不同，则显示结果不同）
altKey = false
button = 0
charCode = undefined
shiftKey = false
clientX = 294
clientY = 109
ctrlKey = false
offsetX = 14
offsetY = 3
screenX = 294
screenY = 205
target = [object]
type = click
Button1

2、“按钮2”
鼠标经过“按钮2”显示mouseover
鼠标移出“按钮2”显示mouseout
单击“按钮2”显示click

Others.aspx
<%@ Page Language=”C#” MasterPageFile=”~/Site.master” AutoEventWireup=”true” CodeFile=”Others.aspx.cs”
Inherits=”ClientScripting_SysUI_Others” Title=”Sys.UI Other Class” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”Server”>
<fieldset>
<legend>title</legend>
<div id=”parentDiv”>
<div id=”childDiv”>
aabbcc
</div>
</div>
<div>
<input type=”button” id=”btnHide” onclick=”btnHide_onclick()” value=”VisibilityMode.hide” />
&nbsp;
<input type=”button” id=”btnCollapse” onclick=”btnCollapse_onclick()” value=”VisibilityMode.collapse” />
</div>
</fieldset>

<script type=”text/javascript” language=”javascript”>

// 让元素“childDiv”变为Control
var a = new Sys.UI.Control(get(‘childDiv’));
// 让元素“parentDiv”变为Control
var b = new Sys.UI.Control(get(‘parentDiv’));

// 先取得a的父控件，然后再取得这个父控件的id
alert(a.get_parent().get_id());
// 让控件“a”变为元素，然后取得这个元素的id
alert(a.get_element().id);

function btnHide_onclick()
{
// 隐藏控件a
a.set_visible(false);
// 隐藏方式为hide，占用页面空间
a.set_visibilityMode(Sys.UI.VisibilityMode.hide);
}

function btnCollapse_onclick()
{
// 隐藏控件a
a.set_visible(false);
// 隐藏方式为collapse，不占用页面空间
a.set_visibilityMode(Sys.UI.VisibilityMode.collapse);
}

</script>

</asp:Content>

运行结果
1、页面加载后
弹出框，信息：parentDiv
弹出框，信息：childDiv

2、单击“VisibilityMode.hide”按钮
“childDiv”被隐藏，但是会占用页面空间