创建自定义 AJAX 客户端控件(msdn)

使用的IDE是vs2005，在进行下一步之前，你的机器上必须装了ASP.NET AJAX 1.0 。

首先来看几个方法的说明：

1、Type.registerNamespace 方法
例如：使用 registerNamespace 方法注册命名空间 Samples
     Type.registerNamespace('Samples');

使用 registerNamespace 方法可以创建命名空间。命名空间是使您可以组织代码的范围区域。这对于大型项目特别有用。使用命名空间可以对类进行分组。这样，每个类名便由其命名空间限定，从而可以创建全局唯一类名。

2、Type.initializeBase 方法

使用 initializeBase 方法可在给定实例的上下文中初始化基类。从派生自基类的类的构造函数调用 initializeBase。实例化派生的类实例时，将调用 initializeBase 方法。子类的实例继承基类对象模型，并且初始化其成员。

例如：var typeInstanceVar = typeVar.baseClassName.initializeBase(instance, baseArguments );

       参数 instance ：要为其初始化基类的实例。通常为 this。

              baseArguments：（可选）基构造函数的参数。可以为 null。

       返回值：基类的实例。

3、Type.registerClass 方法

通过 registerClass 方法，可以按照构造函数的定义，使用可选基类和接口类型注册一个类。registerClass 方法的调用在定义类之后、实例化类之前进行。registerClass 方法是从类直接调用的。

例如：classInstanceVar.registerClass(typeName, baseType, interfaceTypes)

       参数：typeName： 一个字符串，表示类型的完全限定名。

               baseType： （可选）基类型。    
               interfaceTypes:（可选）由类型实现的接口类型定义的未绑定数组。
       返回值：注册的类型。

综合应用：

 <form id="form1" runat="server">
       <asp:ScriptManager runat="server" ID="ScriptManager1">
       </asp:ScriptManager>

       <script type="text/javascript">
        // Register classes to test.
        Type.registerNamespace('Samples');

        Samples.A = function()
        {
            // Initialize as a base class.
            Samples.A.initializeBase(this);
        }

        Samples.B = function(){}
        Samples.C = function(){}

        Samples.A.registerClass('Samples.A');
        Samples.B.registerClass('Samples.B', Samples.A);

        Samples.C.registerClass('Samples.C');

        var isDerived;
        isDerived = Samples.B.inheritsFrom(Samples.A);
        // Output: "true".
        alert(isDerived);

        isDerived = Samples.C.inheritsFrom(Samples.A);
        // Output: "false".
        alert(isDerived);

        </script>
    </form>

言归正传吧！

创建 HoverButton 控件的代码

1. 在支持 AJAX 的 ASP.NET 网站的根目录下，创建一个名为 HoverButton.js 的文件。

2. 向文件中添加以下代码：

   
   Type.registerNamespace("Demo");
   
   // Constructor
   Demo.HoverButton = function(element) {
   
       Demo.HoverButton.initializeBase(this, [element]);
   
       this._clickDelegate = null;
       this._hoverDelegate = null;
       this._unhoverDelegate = null;
   }
   Demo.HoverButton.prototype = {
   
       // text property accessors.
       get_text: function() {
           return this.get_element().innerHTML;
       },
       set_text: function(value) {
           this.get_element().innerHTML = value;
       },
   
       // Bind and unbind to click event.
       add_click: function(handler) {
           this.get_events().addHandler('click', handler);
       },
       remove_click: function(handler) {
           this.get_events().removeHandler('click', handler);
       },
   
       // Bind and unbind to hover event.
       add_hover: function(handler) {
           this.get_events().addHandler('hover', handler);
       },
       remove_hover: function(handler) {
           this.get_events().removeHandler('hover', handler);
       },
   
       // Bind and unbind to unhover event.
       add_unhover: function(handler) {
           this.get_events().addHandler('unhover', handler);
       },
       remove_unhover: function(handler) {
           this.get_events().removeHandler('unhover', handler);
       },
   
       // Release resources before control is disposed.
       dispose: function() {
   
           var element = this.get_element();
   
           if (this._clickDelegate) {
               Sys.UI.DomEvent.removeHandler(element, 'click', this._clickDelegate);
               delete this._clickDelegate;
           }
   
           if (this._hoverDelegate) {
               Sys.UI.DomEvent.removeHandler(element, 'focus', this._hoverDelegate);
               Sys.UI.DomEvent.removeHandler(element, 'mouseover', this._hoverDelegate);
               delete this._hoverDelegate;
           }
   
           if (this._unhoverDelegate) {
               Sys.UI.DomEvent.removeHandler(element, 'blur', this._unhoverDelegate);
               Sys.UI.DomEvent.removeHandler(element, 'mouseout', this._unhoverDelegate);
               delete this._unhoverDelegate;
           }
           Demo.HoverButton.callBaseMethod(this, 'dispose');
       },
   
       initialize: function() {
   
           var element = this.get_element();
   
           if (!element.tabIndex) element.tabIndex = 0;
   
           if (this._clickDelegate === null) {
               this._clickDelegate = Function.createDelegate(this, this._clickHandler);
           }
           Sys.UI.DomEvent.addHandler(element, 'click', this._clickDelegate);
   
           if (this._hoverDelegate === null) {
               this._hoverDelegate = Function.createDelegate(this, this._hoverHandler);
           }
           Sys.UI.DomEvent.addHandler(element, 'mouseover', this._hoverDelegate);
           Sys.UI.DomEvent.addHandler(element, 'focus', this._hoverDelegate);
   
           if (this._unhoverDelegate === null) {
               this._unhoverDelegate = Function.createDelegate(this, this._unhoverHandler);
           }
           Sys.UI.DomEvent.addHandler(element, 'mouseout', this._unhoverDelegate);
           Sys.UI.DomEvent.addHandler(element, 'blur', this._unhoverDelegate);
   
           Demo.HoverButton.callBaseMethod(this, 'initialize');
   
       },
       _clickHandler: function(event) {
           var h = this.get_events().getHandler('click');
           if (h) h(this, Sys.EventArgs.Empty);
       },
       _hoverHandler: function(event) {
           var h = this.get_events().getHandler('hover');
           if (h) h(this, Sys.EventArgs.Empty);
       },
       _unhoverHandler: function(event) {
           var h = this.get_events().getHandler('unhover');
           if (h) h(this, Sys.EventArgs.Empty);
       }
   }
   Demo.HoverButton.registerClass('Demo.HoverButton', Sys.UI.Control);
   
   // Since this script is not loaded by System.Web.Handlers.ScriptResourceHandler
   // invoke Sys.Application.notifyScriptLoaded to notify ScriptManager 
   // that this is the end of the script.
   if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

   /*在所有基于文件的脚本（.js 文件）中调用 notifyScriptLoaded 方法可以通知 ScriptManager 对象引用的脚本已完成加载。脚本管理器按顺序将脚本元素注入 DOM 中，注入时等待每个脚本完成加载，然后继续下一个脚本的加载。对于执行异步回发的页面，必须在页面的每个基于文件的脚本中包含对 notifyScriptLoaded 方法的调用。要在所有浏览器类型中提供关于脚本已完成加载的通知，对 notifyScriptLoaded 方法的调用是唯一可靠的方式。

   调用 notifyScriptLoaded 方法时，建议检查是否存在 Microsoft AJAX Library 以避免库不可用时发生错误。*/

   
   完成脚本编写好后，要在网页中进行注册方可使用，创建使用 HoverButton 控件的网页。
   
   
   <form id="form1" runat="server">
     <asp:ScriptManager runat="server" ID="ScriptManager01">
       <scripts>
         <asp:ScriptReference path="HoverButton.js" />
       </scripts>
     </asp:ScriptManager>
   </form>
   
   网页完整程序：
   
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
   <html  >
   <head id="Head1" runat="server">
   
       <style type="text/css">
           button {border: solid 1px black}
           #HoverLabel {color: blue}
       </style>
       <title>Control Demo</title>
   </head>
   <body>
       <form id="form1" runat="server">
           <div id="ResultDisplay"></div>
   
               <asp:ScriptManager runat="server" ID="ScriptManager01">
                   <scripts>
                      <asp:ScriptReference Path="HoverButton.js" />
                   </scripts>
               </asp:ScriptManager>
   
               <script type="text/javascript">
                   var app = Sys.Application;
                   app.add_init(applicationInitHandler);
   
                   function applicationInitHandler(sender, args) {
                       $create(Demo.HoverButton, {text: 'A HoverButton Control',element: {style: {fontWeight: "bold", borderWidth: "2px"}}}, {click: start, hover: doSomethingOnHover, unhover: doSomethingOnUnHover},null, $get('Button1'));
                   }
   
                   function doSomethingOnHover(sender, args) {
                       hoverMessage = "The mouse is over the button."
                       $get('HoverLabel').innerHTML = hoverMessage;
                   }
   
                   function doSomethingOnUnHover(sender, args) {
                      $get('HoverLabel').innerHTML = "";
                   }
   
                   function start(sender, args) {
                      alert("The start function handled the HoverButton click event.");
                   }
               </script>
   
               <button type="button" id="Button1"></button>&nbsp;
           <div id="HoverLabel"></div>
       </form>
   
   </body>
   </html>