domelement.aspx

ajax实例,可以了解ajax的原理

<%@ 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" onclick="Button3_onclick()" />
    </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_onclick()
    {
        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>