asp.net2.0:扩展ImageButton控件定制自己需要的功能

原创 2007年10月09日 12:20:00
  虽然现在网上可以找到n多第三方控件,可我总是看那些单独的dll不爽,在微软提供的标准控件无法满足实际需求时,大多采取扩展标准控件定制个性功能的方法解决,本文描述了给ImageButton控件增加鼠标悬浮变换图像功能的实现步骤。——cncxz(虫虫) 2006-3-22

  安装上vs.net2005之后,就发现asp.net2.0中的主题和外观功能用起来比较方便,例如ImageButton控件,只要在不同主题下的外观文件(*.Skin)中设置好相应的imageurl属性,在更换主题时做好SkinID关联的ImageButton控件就会指向不同的图片了。后来看到QuickStart中“运行”、“查看源代码”两个按钮效果后,就想,加上一个鼠标悬浮变换图像的功能是不是更好一点?

  首先查看了一下QuickStart中的实现代码,发现它是直接在Html中作的构造:

<target="<%=_target%>" href="<%=RunSample%>">
      
<img alt="Run Sample" border="0" src="<%=HttpRuntime.AppDomainAppVirtualPath%>/images/button_run.gif"
          onmouseout
="this.src='<%=HttpRuntime.AppDomainAppVirtualPath%>/images/button_run.gif'" 
          onmouseover
="this.src='<%=HttpRuntime.AppDomainAppVirtualPath%>/images/button_run-over.gif'" 
          onmousedown
="this.src='<%=HttpRuntime.AppDomainAppVirtualPath%>/images/button_run-down.gif'" 
          onmouseup
="this.src='<%=HttpRuntime.AppDomainAppVirtualPath%>/images/button_run.gif'" /></a>

  于是使用Reflector反编译System.Web.dll,找到ImageButton的源码,原来ImageButton就是一个实现了IPostBackDataHandler、IPostBackEventHandler、IButtonControl三个接口的Image,打开Image的源码,看到了如下的ImageUrl属性定义代码:

[WebCategory("Appearance"), Editor("System.Web.UI.Design.ImageUrlEditor, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"typeof(UITypeEditor)), DefaultValue(""), UrlProperty, Bindable(true), WebSysDescription("Image_ImageUrl")]
        
public virtual string ImageUrl
        
{
            
get
            
{
                
string text1 = (stringthis.ViewState["ImageUrl"];
                
if (text1 != null)
                
{
                    
return text1;
                }

                
return string.Empty;
            }

            
set
            
{
                
this.ViewState["ImageUrl"= value;
            }

        }

  照葫芦画瓢,很简单地就给出了扩展属性ImageOverUrl的代码,此属性用以提供鼠标悬浮时显示的图片。

public virtual string ImageOverUrl
        
{
            
get
            
{
                
string text1 = (string)this.ViewState["ImageOverUrl"];
                
if (text1 != null)
                
{
                    
return text1;
                }

                
return string.Empty;
            }

            
set
            
{
                
this.ViewState["ImageOverUrl"= value;
            }

        }

  下一步就是给Image添加onmouseover和onmouseout客户端事件了。由于ImageButton是按钮,所以在鼠标点击时必然要触发按钮事件,而同时它又是图片,所以应该是在图片的onclick触发按钮事件,因而我们应该可以参照其对onclick的处理方式撰写我们的onmouseover和onmouseout代码。再回到ImageButton的源码中来,发现它是通过重写AddAttributesToRender方法完成onclick功能设计的,代码如下:


        
protected override void AddAttributesToRender(HtmlTextWriter writer)
        
{
            Page page1 
= this.Page;
            
if (page1 != null)
            
{
                page1.VerifyRenderingInServerForm(
this);
            }

            writer.AddAttribute(HtmlTextWriterAttribute.Type, 
"image");
            
string text1 = this.UniqueID;
            PostBackOptions options1 
= this.GetPostBackOptions();
            
if ((text1 != null&& ((options1 == null|| (options1.TargetControl == this)))
            
{
                writer.AddAttribute(HtmlTextWriterAttribute.Name, text1);
            }

            
bool flag1 = base.IsEnabled;
            
string text2 = string.Empty;
            
if (flag1)
            
{
                text2 
= Util.EnsureEndWithSemiColon(this.OnClientClick);
                
if (base.HasAttributes)
                
{
                    
string text3 = base.Attributes["onclick"];
                    
if (text3 != null)
                    
{
                        text2 
= text2 + Util.EnsureEndWithSemiColon(text3);
                        
base.Attributes.Remove("onclick");
                    }

                }

            }

            
if (this.Enabled && !flag1)
            
{
                writer.AddAttribute(HtmlTextWriterAttribute.Disabled, 
"disabled");
            }

            
base.AddAttributesToRender(writer);
            
if ((page1 != null&& (options1 != null))
            
{
                page1.ClientScript.RegisterForEventValidation(options1);
                
if (flag1)
                
{
                    
string text4 = page1.ClientScript.GetPostBackEventReference(options1, false);
                    
if (!string.IsNullOrEmpty(text4))
                    
{
                        text2 
= Util.MergeScript(text2, text4);
                    }

                }

            }

            
if (text2.Length > 0)
            
{
                writer.AddAttribute(HtmlTextWriterAttribute.Onclick, text2);
                
if (base.EnableLegacyRendering)
                
{
                    writer.AddAttribute(
"language""javascript"false);
                }

            }

        }

  于是,onmouseover和onmouseout的设计代码也就出来了:


        
protected override void AddAttributesToRender(HtmlTextWriter writer)
        
{
            
bool flag1 = base.IsEnabled;
            
if (!string.IsNullOrEmpty(this.ImageOverUrl) && flag1)
            
{
                
string Textover = "this.src='" + base.ResolveClientUrl(this.ImageOverUrl) + "';";
                
string Textout = "this.src='" + base.ResolveClientUrl(this.ImageUrl) + "';";
                
if (base.HasAttributes)
                
{
                    
string temp;
                    temp 
= base.Attributes["onmouseover"];
                    
if (temp != null)
                    
{
                        Textover 
= Textover + temp;
                        
base.Attributes.Remove("onmouseover");
                    }

                    temp 
= base.Attributes["onmouseout"];
                    
if (temp != null)
                    
{
                        Textout 
= Textout + temp;
                        
base.Attributes.Remove("onmouseout");
                    }

                }


                
base.Attributes.Add("onmouseover", Textover);
                
base.Attributes.Add("onmouseout", Textout);
            }


            
base.AddAttributesToRender(writer);

        }

相关源码工程下载:http://www.cnblogs.com/Files/cncxz/selfImageButton.rar

 

浏览器的定制与扩展

本文分如下章节: 前言 在MFC中使用浏览器 怎样扩展或定制浏览器 定制鼠标右键弹出出菜单 实现脚本扩展(很重要的external接口) C++代码中如何调用网页脚本中的函数 ...
  • momosp
  • momosp
  • 2014年09月21日 11:11
  • 1125

定制Eclipse IDE之功能篇(一)

上文回顾:定制Eclipse IDE之界面篇   这一篇文章将记录一些Eclipse插件拓展(extension),简单讲述常用拓展的用法,但可能不会那么详细。 我的主要插件的拓展如...
  • MitKey
  • MitKey
  • 2016年05月30日 09:58
  • 644

android开源系列:CircleImageView自定义圆形控件的使用

博客源址:android开源系列:CircleImageView自定义圆形控件的使用 博客时间:2014-05-02 20:52 1.自定义圆形控件github地址:https:/...
  • Buaaroid
  • Buaaroid
  • 2015年10月31日 17:10
  • 3330

【自定义Android带图片和文字的ImageButton】

自定义Android带图片的按钮 前言 现在移动设备的按钮设计讲究大图标小文字,希望用户只要一看到图标便能知道这个按钮是干嘛的,但又要有必要的文字提示,最常见的就数搜索按钮了,上面一个大大...
  • u013531824
  • u013531824
  • 2014年04月03日 16:34
  • 1953

ImageButton带有文字(或者Button中带有文字与图片)

安卓开发中,很多人都会遇到一个问题:如何让按钮带上图片以及文字描述呢?这里我找了几种解决方案: 一、布局文件直接使用Button,使用自带的drawableTop设置图片相对文本位置,然后设置文本即...
  • rxb14520
  • rxb14520
  • 2015年01月15日 16:05
  • 1603

安卓控件之Button与ImageButton详解以及其按下效果的实现

Android系统控件Button是一种按钮控件,用户能够在该控件上点击,并后引发相应的事件处理方法;ImageButton用以实现能够显示图像功能的控件按钮。...
  • sunmc1204953974
  • sunmc1204953974
  • 2014年07月26日 00:09
  • 2348

c#扩展方法简介

扩展方法      如何知道的。这还得从项目的本身说起。该项目是一套的微软底层架构上搭建起来的。所有的框架以及控件的封装,数据的传递方法都是整体的框架封装好的。对常用的dropwodnlist控件...
  • han_yankun2009
  • han_yankun2009
  • 2014年05月08日 19:42
  • 3441

Hive体系结构(四)注意事项与扩展特性

Hive体系结构(一)架构与基本组成 Hive体系结构(二)Hive的执行原理、与关系型数据库的比较 Hive体系结构(三)元数据库与基本操作 Hive体系结构(四)注意事项与扩展特...
  • Lnho2015
  • Lnho2015
  • 2016年05月15日 18:00
  • 10909

在MFC应用中深入定制WebBrowser控件(转)

正如VC ++ 6.0的演示程序MFCIE所示,用应用程序向导创建一个具有Web导航能力的MFC应用可谓轻而易举。本文在此基础上,进一步讨论两个问题:资源自包含的实现,上下文菜单以及快捷键的完全控制。...
  • zhangtai8891
  • zhangtai8891
  • 2014年07月21日 16:34
  • 406

多态图标(2)-WPF自定义用户控件ImageButton

前言 本节目的是设计WPF自定义控件ImageButton,这样就可以使用咱们的四态图标,方便在项目中直接使用,文章底部会将源码奉上,demo的演示效果如下: WPF工程 RBImageBut...
  • mybelief321
  • mybelief321
  • 2015年11月23日 18:55
  • 2284
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:asp.net2.0:扩展ImageButton控件定制自己需要的功能
举报原因:
原因补充:

(最多只允许输入30个字)