該擴展的功能有以下幾點：
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
希望能對您有幫助。

轉載于:https://www.cnblogs.com/strinkbug/archive/2006/12/21/599462.html

總結

以上是生活随笔為你收集整理的自己动手编写一个ajax extender的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。