新瓶舊酒ASP.NET AJAX(5) - 用戶端腳本程式設計（Sys.UI命名空間下的類和快捷方法）

<a href="http://down.51cto.com/data/100916" target="_blank">[源碼下載下傳]</a>

介紹

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()

示例

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

.redBackgroundColor

{

background-color:Red;

}

.blueBackgroundColor

background-color:Blue;

</style>

<p>

</p>

<asp:Label ID="Label1" runat="server" BackColor="Black" ForeColor="White" Text="Label1"

Width="102px"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="500px" Height="300px"></asp:TextBox>

$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的高度 = 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:Label ID="Label1" runat="server"></asp:Label>

同時添加多個事件處理器

<asp:Label ID="Label2" runat="server"></asp:Label>

// 給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;

// 給ID為“Button2”的元素增加多個事件處理器

Sys.UI.DomEvent.addHandlers

(

$get("Button2"),

click: processEventInfo,

mouseover: processEventInfo,

mouseout: processEventInfo

);

result += eventElement.type;

$get("<%= Label2.ClientID %>").innerHTML = result;

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

<legend>title</legend>

aabbcc

</div>

<div>

</fieldset>

// 讓元素“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_

// 隐藏方式為collapse，不占用頁面空間

a.set_visibilityMode(Sys.UI.VisibilityMode.collapse);

1、頁面加載後

彈出框，資訊：parentDiv

彈出框，資訊：childDiv

2、單擊“VisibilityMode.hide”按鈕

“childDiv”被隐藏，但是會占用頁面空間

3、單擊“VisibilityMode.collapse”按鈕

“childDiv”被隐藏，而且不會占用頁面空間

本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/344799，如需轉載請自行聯系原作者

新瓶舊酒ASP.NET AJAX(5) - 用戶端腳本程式設計（Sys.UI命名空間下的類和快捷方法）

繼續閱讀

[轉]iOS微信小視訊優化心得

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

android 主線程的相關問題

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

layui多任務上傳添加進度條

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題