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

简介:
[索引页]
[源码下载]


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


作者: webabcd


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

<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
[源码下载]
 


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




相关文章
|
3天前
|
Linux C# Android开发
.NET Avalonia开源、免费的桌面UI库 - SukiUI
.NET Avalonia开源、免费的桌面UI库 - SukiUI
|
1月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
|
20天前
|
SQL 开发框架 .NET
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
27 0
|
1月前
|
开发框架 前端开发 JavaScript
一款基于.NET Core的快速开发框架、支持多种前端UI、内置代码生成器
一款基于.NET Core的快速开发框架、支持多种前端UI、内置代码生成器
|
2月前
|
C# Android开发 iOS开发
9 个 .NET UI 框架,您的选择是?
介绍 9 款 .NET UI 框架,有你的菜麽。
129 1
9 个 .NET UI 框架,您的选择是?
|
2月前
|
存储 JavaScript 调度
基于.NET Core + Quartz.NET+ Vue + IView开箱即用的定时任务UI
基于.NET Core + Quartz.NET+ Vue + IView开箱即用的定时任务UI
|
3月前
|
编解码 JSON 算法
一个支持.Net 7的WinForm开源UI组件框架
一个支持.Net 7的WinForm开源UI组件框架
57 0
|
7月前
|
开发框架 前端开发 JavaScript
ASP.NET Core MVC 从入门到精通之wwwroot和客户端库
ASP.NET Core MVC 从入门到精通之wwwroot和客户端库
129 0
|
11月前
|
XML 编解码 C#
.NET MAUI 安卓 UI 资源设置
本文主要介绍使用 MAUI 开发安卓应用时,如何更换和处理 UI 资源:应用名称,图标,主题配色,状态栏,闪屏。
390 0
.NET MAUI 安卓 UI 资源设置
|
XML 前端开发 JavaScript
Ajax --- 客户端与服务器端之间传递数据
Ajax --- 客户端与服务器端之间传递数据
87 0

相关产品

  • 云迁移中心
  • 相关实验场景

    更多