引言:
大家都知道Ajax的之所以能如此丰富地实现,客户端脚本功不可没。而像Asp.Net Ajax这般庞大的工程,没有脚本类库的支撑是很难想象的。《Microsoft AJAX Library》就是Asp.Net Ajax的脚本类库。其实网上流行的脚本类库是很多的,也有一些是十分成功的,例如:prototype.js脚本类库。这些脚本类库封装了很多常用的功能,通过使用这些脚本类库我们能极大的提高工作效率。
这篇文章依赖于www.AspNetResources.com网站2007-01-24发布的《Microsoft AJAX Library》PDF版本。DflyingChen对此有完整而准确的翻译。
(文章地址:http://www.cnblogs.com/dflying/archive/2007/02/09/639638.aspx)
此篇文章面向的对象是那些可能连“prototype.js”都没有听说过,对“脚本类库”一词还很陌生的朋友。文章也只是举一些简单而便于理解的示例帮助他们更好的理解,所以可以说没有任何技术含量,与DflyingChen对英文原版的发现和翻译之功德相比,难及其十一。在此向DflyingChen献上敬意。
我个人对DOM的操作这块最感兴趣,所以我先从DomElement类讲起,如果给你带来不便,请谅解。
相关链接:
实例讲解《Microsoft AJAX Library》(1):DomElement类
实例讲解《Microsoft AJAX Library》(2):DomEvent类
正文:
准备工作:
1:安装 Asp.Net Ajax(引入AjaxControlToolkit名域)。
2:页面上拖个ToolkitScriptManager
说明:
标注有图标的为静态方法,无须实例化对象即可使用。
1:getElementById(id,element)
这个太熟了吧。比以前的getElementById有所扩充,可以指定某个元素容器范围内。看《DomElement 示例页面》例子中的yzy_getElementById函数(为了防止同名误解,我的自建函数均有“yzy_”前缀)。第一次alert是只有id参数的时候,第二alert是txtSameFather容器内的txtSameID的value值。
2:$get(id,element)
其实就是Sys.UI.DomElement.getElementById(id,element)的简写形式。没有区别。这让我想到了prototype.js脚本库中的”$”函数,个人感觉那个也很强。如果页面上有多个相同的id会返回object数组。
具体使用请参看《DomElement 示例页面》中的yzy_$get函数。
3:addCssClass(element,className)
网页外观设置终于不用那么麻烦了。呵呵。作用和prototype.js中的addClassName类似。
不过说,看《DomElement 示例页面》中的yzy_ addCssClass函数。
4:containsCssClass(element,className)
判断element元素是否使用了className样式class。
具体使用请参看《DomElement 示例页面》中的yzy_containsCssClass函数。
5:removeCssClass()(element,className)
从element元素中移除className样式class。如果没有此样式则什么也不做。
具体使用请参看《DomElement 示例页面》中的yzy_ removeCssClass函数。
6:toggleCssClass(element,className)
Toggle是个好东西,不用你再if……else……的判断了,本身就是个奇偶开关。是真就让它假,是假就让它真。
toggleCssClass的作用是,判断element元素是否应用了className样式class。如果用了,就去掉,如果没有用就给它加上。
具体使用请参看《DomElement 示例页面》中的yzy_ toggleCssClass函数。
7:getLocation(element)
取得element元素相对与浏览器左上角的绝对位置。
样式表中position是个比较绕人的概念。如果你对这个概念还不是特别清楚,我建议你先看篇文章将这个概念搞清楚——《彻底弄懂CSS盒子模式四(绝对定位和相对定位)》
具体使用请参看《DomElement 示例页面》中的yzy_ getLocation函数。
8:setLocation(element,x,y)
设置元素的位置,这个位置是指相对它最近的,且设置了postion样式的祖先元素。这句话的确比较饶人。所以你要使用这个东西,必须先搞懂position这个概念,不然会出现你意料之外现象。
具体使用请参看《DomElement 示例页面》中的yzy_ setLocation函数。
9:getBounds(element)
返回元素的绝对位置以及它“盒装模型”模型的长和宽。返回值对象保护下面的属性:
x,y:取得element元素相对与浏览器左上角的绝对位置。作用和getLocation一样。
width:元素“盒装模型”的宽度。包含border和padding等部分
height:元素“盒装模型”的长度。包含border和padding等部分
如果你对“盒装模型”不是很理解的话,请阅读一下这篇文章:《彻底弄懂CSS盒子模式一(DIV布局快速入门)》
具体使用请参看《DomElement 示例页面》中的yzy_ getBounds函数。
《DomElement 示例页面》源代码:
<% @ Register Assembly = " AjaxControlToolkit " Namespace = " AjaxControlToolkit " TagPrefix = " cc1 " %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > DomElement 示例页面 </ title >
< style type ="text/css" >
#divSameFather {
width : 200px ;
height : 300px ;
border : 1px solid red ;
margin : 10px 0 200px 0 ;
positio : relative ;
}
.cssRedFont {
color : red ;
}
.cssGreenFont {
color : green ;
}
</ style >
< script type ="text/javascript" language ="javascript" >
function yzy_getElementById(){
var library;
library = Sys.UI.DomElement;
var divFather = library.getElementById( " divSameFather " );
var txtTest = library.getElementById( " txtSameID " );
alert(txtTest.value);
txtTest = library.getElementById( " txtSameID " ,divFather); // 指定了容器范围
alert(txtTest.value);
}
function yzy_$get(){
var divFather = $get( " divSameFather " );
var txtTest = $get( " txtSameID " );
alert(txtTest.value);
txtTest = $get( " txtSameID " ,divFather); // 指定了容器范围
alert(txtTest.value);
}
function yzy_addCssClass(){
var library;
library = Sys.UI.DomElement;
var txtTest = $get( " txtSameID " );
library.addCssClass(txtTest, " cssRedFont " );
}
function yzy_containsCssClass(){
var library;
library = Sys.UI.DomElement;
var txtTest = $get( " txtSameID " );
var iscontainsCssClass = library.containsCssClass(txtTest, " cssRedFont " );
alert(iscontainsCssClass);
}
function yzy_removeCssClass(){
var library;
library = Sys.UI.DomElement;
var txtTest = $get( " txtSameID " );
library.removeCssClass(txtTest, " cssRedFont " );
}
function yzy_toggleCssClass(){
var library;
library = Sys.UI.DomElement;
var txtTest = $get( " txtSameID " );
library.toggleCssClass(txtTest, " cssRedFont " );
}
function yzy_getLocation(){
var library;
library = Sys.UI.DomElement;
var txtTest = $get( " txtSameID " );
var position = library.getLocation(txtTest);
alert( " X: " + position.x + " Y: " + position.y);
}
function yzy_setLocation(){
var library;
library = Sys.UI.DomElement;
var divFather = library.getElementById( " divSameFather " );
txtTest_inside = library.getElementById( " txtSameID " ,divFather); // 指定了容器范围
library.setLocation(txtTest_inside, 50 , 100 );
}
function yzy_getBounds(){
var library;
library = Sys.UI.DomElement;
var txtTest = $get( " txtSameID " );
txtTest = library.getElementById( " txtSameID " ); // 指定了容器范围
boundsText = library.getBounds(txtTest);
alert( " X: " + boundsText.x + " Y: " + boundsText.y + " /n " + " width: " + boundsText.width + " height: " + boundsText.height);
}
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< cc1:ToolkitScriptManager ID ="ToolkitScriptManager1" runat ="server" >
</ cc1:ToolkitScriptManager >
< input id ="txtSameID" type ="text" value ="outSideInput" />
< div id ="divSameFather" >
< input id ="txtSameID" type ="text" value ="inSideInput" />
</ div >
< input id ="Button1" type ="button" value ="getElementById" onclick ="yzy_getElementById();" />
< input id ="Button2" type ="button" value ="$get" onclick ="yzy_$get();" />
< input id ="Button3" type ="button" value ="addCssClass" onclick ="yzy_addCssClass();" />
< input id ="Button4" type ="button" value ="containsCssClass" onclick ="yzy_containsCssClass();" />
< input id ="Button5" type ="button" value ="removeCssClass" onclick ="yzy_removeCssClass();" />
< input id ="Button6" type ="button" value ="toggleCssClass" onclick ="yzy_toggleCssClass();" />
< hr />
< input id ="Button7" type ="button" value ="getLocation" onclick ="yzy_getLocation();" />
< input id ="Button8" type ="button" value ="setLocation" onclick ="yzy_setLocation();" />
< input id ="Button9" type ="button" value ="getBounds" onclick ="yzy_getBounds();" />
</ form >
</ body >
</ html >
keyword:Microsoft AJAX Library,DomElement,ajax DomElement类,脚本类库,javascript类库