自己动手编写一个ajax extender

该扩展的功能有以下几点：
1、当鼠标移到某个按钮上时，该按钮显示一个Css样式；
2、当鼠标移开该按钮时，该按钮显示另外一个Css样式；
3、当鼠标点击该按钮时，执行一个用户自己定义的javascript函数；

该extender共有以下三个文件：
HoverButtonExtender.cs
HoverButtonDesigner.cs
HoverButtonBehavior.js
其中HoverButtonDesigner.cs和HoverButtonBehavior.js的代码分别如下：

HoverButtonBehavior.js

  1// (c) Copyright Microsoft Corporation.
  2// This source is subject to the Microsoft Permissive License.
  3// See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.
  4// All other rights reserved.
  5
  6
  7// README
  8//
  9// There are two steps to adding a property:
 10//
 11// 1. Create a member variable to store your property
 12// 2. Add the get_ and set_ accessors for your property.
 13//
 14// Remember that both are case sensitive!
 15//
 16
 17Type.registerNamespace('HoverButton');
 18
 19HoverButton.HoverButtonBehavior = function(element) {
 20
 21    HoverButton.HoverButtonBehavior.initializeBase(this, [element]);
 22
 23    // TODO : (Step 1) Add your property variables here
 24    //
 25    this._HoverButtonCssClass = null;
 26    this._UnHoverButtonCssClass = null;
 27    this._OnButtonClickScript = null;
 28    this._clickHandler = null;
 29    this._hoverHandler = null;
 30    this._unhoverHandler = null;    
 31
 32}
 33
 34HoverButton.HoverButtonBehavior.prototype = {
 35
 36    initialize : function() {
 37        HoverButton.HoverButtonBehavior.callBaseMethod(this, 'initialize');
 38        
 39        
 40        this._hoverHandler = Function.createDelegate(this, this._onTargetHover);       
 41        this._unhoverHandler = Function.createDelegate(this, this._onTargetUnhover);    
 42        if(this.get_element() && this._onButtonClick)
 43        {
 44            this._clickHandler = Function.createDelegate(this,this._onButtonClick);
 45            $addHandler(this.get_element(),'click',this._clickHandler);
 46        }
 47        this._hoverBehavior = $create(AjaxControlToolkit.HoverBehavior, {unhoverDelay:1, hoverElement: null}, null, null, this.get_element());
 48        this._hoverBehavior.add_hover(this._hoverHandler);
 49        this._hoverBehavior.add_unhover(this._unhoverHandler);  
 50        // TODO: add your initalization code here
 51    },
 52
 53    dispose : function() {
 54        // TODO: add your cleanup code here
 55         if (this._hoverBehavior) {
 56            this._hoverBehavior.dispose();
 57            this._hoverBeahvior = null;            
 58        }        
 59        HoverButton.HoverButtonBehavior.callBaseMethod(this, 'dispose');
 60    },
 61
 62
 63    _onTargetHover : function(eventArgs)
 64    {
 65        var e = this.get_element();   
 66        Sys.UI.DomElement.removeCssClass(e, this._UnHoverButtonCssClass);     
 67        Sys.UI.DomElement.addCssClass(e, this._HoverButtonCssClass);
 68    },
 69    
 70        //onUnHover
 71    _onTargetUnhover: function(eventArgs)
 72    {
 73        var e = this.get_element();   
 74        Sys.UI.DomElement.removeCssClass(e, this._HoverButtonCssClass);     
 75        Sys.UI.DomElement.addCssClass(e, this._UnHoverButtonCssClass);
 76    },
 77    _onButtonClick: function(eventArgs)
 78    {
 79         if (this._OnButtonClickScript) {
 80                window.setTimeout(this._OnButtonClickScript, 0);
 81            }
 82    },
 83    // TODO: (Step 2) Add your property accessors here
 84    //
 85    get_HoverButtonCssClass : function() {
 86        return this._HoverButtonCssClass;
 87    },
 88
 89    set_HoverButtonCssClass : function(value) {
 90        this._HoverButtonCssClass = value;
 91    },
 92     get_UnHoverButtonCssClass : function() {
 93        return this._UnHoverButtonCssClass;
 94    },
 95
 96    set_UnHoverButtonCssClass : function(value) {
 97        this._UnHoverButtonCssClass = value;
 98    },
 99    
100    set_OnButtonClickScript: function(value)
101    {
102        this._OnButtonClickScript = value;
103    },
104    
105    get_OnButtonClickScript: function()
106    {
107        return this._OnButtonClickScript;
108    }
109}
110
111HoverButton.HoverButtonBehavior.registerClass('HoverButton.HoverButtonBehavior', AjaxControlToolkit.BehaviorBase);
112

这里注意一下第80行，window.setTimeout(this._OnButtonClickScript, 0); 这个_OnButtonClickScript是一个字符串，表示客户端页面上用户自己定义的一个函数的名字，通过这个语句就能够执行整个客户端函数。有了这样的机制，用户就能够自己定义按钮的响应函数了。
HoverButtonExtender.cs

// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Permissive License.
// See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.
// All other rights reserved.

using System;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.ComponentModel;
using System.ComponentModel.Design;
using AjaxControlToolkit;
using Microsoft.Web.UI;


[assembly: System.Web.UI.WebResource("HoverButton.HoverButtonBehavior.js", "text/javascript")]

namespace HoverButton
{
    [Designer(typeof(HoverButtonDesigner))]
    [ClientScriptResource("HoverButton.HoverButtonBehavior", "HoverButton.HoverButtonBehavior.js")]
    [TargetControlType(typeof(Control))]
    [RequiredScript(typeof(HoverExtender))]
    [RequiredScript(typeof(CommonToolkitScripts))]
    public class HoverButtonExtender : ExtenderControlBase
    {
        // TODO: Add your property accessors here.
        //
        [ExtenderControlProperty]
        [DefaultValue("")]
        public string HoverButtonCssClass
        {
            get
            {
                return GetPropertyStringValue("HoverButtonCssClass");
            }
            set
            {
                SetPropertyStringValue("HoverButtonCssClass", value);
            }
        }

        [ExtenderControlProperty]
        [DefaultValue("")]
        public string UnHoverButtonCssClass
        {
            get
            {
                return GetPropertyStringValue("UnHoverButtonCssClass");
            }
            set
            {
                SetPropertyStringValue("UnHoverButtonCssClass", value);
            }
        }

        [ExtenderControlProperty]
        [DefaultValue("")]
        public string OnButtonClickScript
        {
            get
            {
                return GetPropertyStringValue("OnButtonClickScript");
            }
            set
            {
                SetPropertyStringValue("OnButtonClickScript", value);
            }
        }
        

    }
}

该扩展的使用，代码如下：

 1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 2
 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 4<%@ Register Assembly="HoverButton" Namespace="HoverButton" TagPrefix="cc1"%>
 5
 6<html xmlns="http://www.w3.org/1999/xhtml">
 7<head runat="server">
 8    <link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" />
 9    <title>测试HoverButton</title>
10</head>
11<body>
12    <form id="form1" runat="server">
13        <asp:ScriptManager ID="ScriptManager1" runat="server" />
14        <div>
15            <asp:textbox id="TextBox1" runat="server"></asp:textbox>
16            <asp:button id="Button1" runat="server" text="Button" />            
17            <cc1:HoverButtonExtender runat="server" id="hbe" targetcontrolid="Button1"  HoverButtonCssClass="hoverbutton" unhoverbuttoncssclass="unhoverbutton"></cc1:HoverButtonExtender>
18        </div>
19    </form>
20</body>
21</html>
22

希望能对您有帮助。