您的位置：首页 > 编程语言 > ASP

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

2007-06-11 09:20 483 查看

[索引页]
[源码下载]

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

作者：webabcd

介绍

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">

.redBackgroundColor

{

}{

background-color:Red;

}

.blueBackgroundColor

{

}{

background-color:Blue;

}

</style>

<p>

</p>

<p>

</p>

<p>

</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>

/**//*

$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>

</p>

<p>

<asp:Label ID="Label1" runat="server"></asp:Label>

</p>

<p>

同时添加多个事件处理器

</p>

<p>

</p>

<p>

<asp:Label ID="Label2" runat="server"></asp:Label>

</p>

// 给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>

// 给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">

<legend>title</legend>

aabbcc

</div>

<div>

</div>

</fieldset>

// 让元素“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”被隐藏，但是会占用页面空间

3、单击“VisibilityMode.collapse”按钮

“childDiv”被隐藏，而且不会占用页面空间

OK
[源码下载]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： asp.net ajax 脚本编程 button textbox

相关文章推荐

新的分享

章节导航