该扩展的功能有以下几点:
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相关推荐

  1. idea html ajax,在 IntelliJ IDEA 8.1中编写一个ajax jquery实例,取不到页面上的值

    在 IntelliJ IDEA 8.1中编写一个ajax jquery实例,取不到页面上的值0 brnm12942014.08.17浏览115次分享举报 public class AjaxServle ...

  2. linux的静态编译elf无法调试,[翻译]自己动手编写一个Linux调试器系列之4 ELF文件格式与DWARF调试格式 by lantie@15PB...

    自己动手编写一个Linux调试器系列之4 ELF文件格式与DWARF调试格式 by lantie@15PB 在上一节中,你已经听说了DWARF调试格式,它是程序的调试信息,是一种可以更好理解源码的方式 ...

  3. linux写一个最简单的操作系统,自己动手编写一个简单的操作系统

    有人可能担心自己既没有学过计算机原理,也没有学过操作系统原理,更不懂汇编语言,对C语言也一知半解,能写操作系统吗?答案是没问题.我将带大家一步一步完成自己的操作系统.当然如果学一学上述内容再好不过. ...

  4. 《Python神经网络编程》自己动手编写一个神经网络

    最近在看一些经典的论文,想要动手复现其中的代码,无奈自己水平过于低,总感觉对于神经网络的理解不够深入,于是想补一下相关的知识. 便找到了<Python神经网络编程>这本书,若稍微有些基础看 ...

  5. 自己动手编写一个在线保存百度谷歌搜索关键词历史记录的油猴脚本

    标题快捷导航 如何通过Web技术实现我们的需求 需要的技术栈 油猴脚本的编写 浏览器扩展的编写 后台部分 小结 如何通过Web技术实现我们的需求 相信大家只要会一点前端和后端基础的,一看到这个标题就有 ...

  6. 自己动手编写一个自动发送弹幕的脚本,原来如此简单

    听很多朋友说,B站播放完成率也是一项挺重要的指标,那么,必须就需要来提高它了.当然作为一个互联网人,怎么可能自己手动来播放视频来提高播放完成率呢? 下面就让我们一起动手干它吧. 主要思路:自动循环播放 ...

  7. 动手编写一个以太坊智能合约

    如何部署.调用智能合约 RPC 之前的章节中讲到了怎么写.部署合约以及与合约互动.现在该讲讲与以太坊网络和智能合约沟通的细节了. 一个以太坊节点提供一个RPC界面.这个界面给Ðapp(去中心化应用)访 ...

  8. 自己动手编写一个VS插件 一

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 作者:朱 ...

  9. 自己动手编写一个VS插件(六)

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在上篇中我们已经实现了创建和显示一个工具栏出来,它的效果图是这样的: 现在我们实现一些简单功能,具体就是单击按钮弹出一 ...

最新文章

  1. Go 编译的可执行文件是否有动态库链接?
  2. java 参数 string_关于Java中String类型的参数传递问题
  3. android 获取sim卡,Android 获取手机SIM卡运营商
  4. .NET Core开发日志——RequestDelegate
  5. 量子计算机迷宫,一个简单的例子,带你读懂量子计算机
  6. 没人脉,没资源,没背景的人,最好的出路是什么?
  7. 线性判别分析(Linear Discriminant Analysis ,简称LDA)
  8. Eclipse Code Template 设置自动加注释
  9. C++编译器的函数名修饰规则
  10. 单龙芯3A3000-7A1000PMON研究学习-(15)撸起袖子干-先来一杯代码吧
  11. 万网域名查询接口(API)的说明
  12. MES管理系统,有效解决制造业信息化“断层”
  13. 2个令人震撼的Demo
  14. 单点登录(SSO)、CAS介绍
  15. hbase数据库_hbase数据库 修改数据
  16. 2018年工商银行软件开发中心面试总结
  17. ubuntu使用zsh进行命令行自动补全
  18. 很抱歉,OneDrive服务器出现问题,请稍后重试。(错误代码:0x8004def5)
  19. java中怎么编写围棋对弈_java课程设计围棋对弈(含代码).doc
  20. 橘色超漂亮滑动二级导航菜单

热门文章

  1. 单节点配置SecondaryNameNode
  2. Build a Machine Learning Portfolio(构建机器学习投资组合)
  3. Ubuntu 10.04 的源服务器和PXE安装环境搭建。
  4. 【python 9】python注册器
  5. 全志A33-BootLoader的两个阶段:boot0和second boot
  6. 通过ISO镜像文件安装Ubuntu(可实现默认启动Windows的双系统)
  7. Cadence元器件库
  8. 从零开始学电脑_带你从零开始学装机 打造自己的专属电脑之固态和机械硬盘搭配篇...
  9. python 工资管理软件_基于[Python]的员工管理系统
  10. java的基础类库称为_JAVA基本类库介绍