Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)归海一刀
published in(发表于) 2014/1/30 1:11:01
新瓶旧酒ASP.NET,AJAX(5),-,客户端脚本编程(Sys.UI命名空间下的类和快捷方法)_[Asp.Net教程]

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

















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





介绍
Sys.UI命名空间下包含与UI相关的类,像控件、事件和Microsoft AJAX Library里的UI属性之类的。快捷方法就是用简短的代码调用某个方法。





关键
1、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" %>













onclick="Button3_onclick()" />



Width="102px">













运行结果
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" %>






单击按钮后查看事件的详细信息








&nbsp;



同时添加多个事件处理器


















运行结果
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" %>






title


aabbcc



onclick="btnHide_onclick()" value="VisibilityMode.hide" />
&nbsp;
onclick="btnCollapse_onclick()" value="VisibilityMode.collapse" />










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




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




3、单击“VisibilityMode.collapse”按钮
“childDiv”被隐藏,而且不会占用页面空间

作者:webabcd

[源码下载]

























If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)





QQ:154298438
QQ:417480759