实例讲解《Microsoft AJAX Library》(1)：DomElement类

最新推荐文章于 2024-09-02 16:18:48 发布

dushizhuma

最新推荐文章于 2024-09-02 16:18:48 发布

阅读量415

点赞数

文章标签： microsoft ajax library button 脚本 asp.net

本文链接：https://blog.csdn.net/dushizhuma/article/details/4607073

版权

引言：
大家都知道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 示例页面》源代码：

<% @ Page Language = " vb " AutoEventWireup = " false " CodeBehind = " DomElement.aspx.vb " Inherits = " AjaxExample.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类库

dushizhuma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实例讲解《Microsoft AJAX Library》(1)：DomElement类

引言：大家都知道Ajax的之所以能如此丰富地实现，客户端脚本功不可没。而像Asp.Net Ajax这般庞大的工程，没有脚本类库的支撑是很难想象的。《Microsoft AJAX Library》就是Asp.Net Ajax的脚本类库。其实网上流行的脚本类库是很多的，也有一些是十分成功的，例如：prototype.js脚本类库。这些脚本类库封装了很多常用的功能，通过使用这些脚本类库我们能极
复制链接

扫一扫