posts - 615, comments - 10492, trackbacks - 594, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

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

Posted on 2007-06-11 09:33 webabcd 阅读(...) 评论(...) 编辑 收藏
[索引页]
[源码下载]


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

运行结果
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>&nbsp;</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" onclick="btnHide_onclick()" value="VisibilityMode.hide" />
            
&nbsp;
            
<input type="button" id="btnCollapse" onclick="btnCollapse_onclick()" 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_onclick()
        
{
            
// 隐藏控件a
            a.set_visible(false);
            
// 隐藏方式为hide,占用页面空间
            a.set_visibilityMode(Sys.UI.VisibilityMode.hide);
        }

        
        
function btnCollapse_onclick()
        
{
            
// 隐藏控件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
[源码下载]