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命名空间下的类和快捷方法)
介绍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">
onclick="Button3_onclick()" />
Width="102px">
运行结果1、单击“转换CssClass”按钮该按钮的样式会在指定的两种CssClass间切换
2、单击“移除CssClass”按钮该按钮的指定CssClass会被移除
3、TextBox显示为:Label1的x坐标 = 276Label1的y坐标 = 189Label1的宽度 = 102
Label1的高度 = 15 Label1的坐标(x, y) = (276,189)
单击“移动Lable1”按钮后(Lable1的位置发生变化)TextBox显示为:Label1的x坐标 = 276Label1的y坐标 = 189Label1的宽度 = 102
点击移动按钮后 - 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" %>
单击按钮后查看事件的详细信息 同时添加多个事件处理器
单击按钮后查看事件的详细信息
同时添加多个事件处理器
运行结果1、单击“按钮(s)”(单击位置不同,则显示结果不同)altKey = falsebutton = 0charCode = undefinedshiftKey = falseclientX = 294clientY = 109ctrlKey = falseoffsetX = 14offsetY = 3screenX = 294screenY = 205target = [object]type = clickButton1
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" /> onclick="btnCollapse_onclick()" value="VisibilityMode.collapse" />
运行结果1、页面加载后弹出框,信息:parentDiv弹出框,信息:childDiv
2、单击“VisibilityMode.hide”按钮“childDiv”被隐藏,但是会占用页面空间
3、单击“VisibilityMode.collapse”按钮“childDiv”被隐藏,而且不会占用页面空间作者:webabcd[源码下载]
赞