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

[索引页]
[源码下载]

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

作者： 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" %> 

 
         
        

 
                 
        

 
        

 
                 
        

 
        

 
                 
        

 
        

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

 
        

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

 
        

 
                 
        

 
        

 
                 
        

 
        

 

 
        

 
                同时添加多个事件处理器 
        

 
        

 
                 
        

 
        

 
                 
        

 

         
         
         

 

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

 
                

 
                

 
                         
                          
                         
                

 
        

 

         

 

 

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

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

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


OK
[源码下载]

 

     本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/344799 ，如需转载请自行联系原作者