新瓶旧酒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" %>

<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" />
        </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_
        {
                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> </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" value="VisibilityMode.hide" />
                         
                        <input type="button" id="btnCollapse" 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_
                {
                        // 隐藏控件a
                        a.set_visible(false);
                        // 隐藏方式为hide，占用页面空间
                        a.set_visibilityMode(Sys.UI.VisibilityMode.hide);
                }
                
                function btnCollapse_
                {
                        // 隐藏控件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
[源码下载]