自定义图像按钮控件,带有鼠标悬停效果和客户端操作

分享于 

11分钟阅读

Web开发

  繁體

介绍

本文描述了一种简单的方法来构建一个自定义 ASP.NET 2.0图像按钮控件,并在单击时调用一个JavaScript函数。 本文的代码相当简单,代码相当简单,通过这个示例说明的概念相对重要,将客户端功能集成到 ASP.NET 2.0项目中是关键。

从本文中提取的两个重要项目是:

  • 你可以将属性添加到自定义控件中,并且
  • 你可以从定制控件中嵌入和调用JavaScript函数。

这种控件的一个可能用途可能是将其中几个放入 Panel 中,并将 Panel 和 Collection 用作工具栏。 当然,该控件也可以作为独立控件正常工作。

入门

开始时,打开 Visual Studio 2005 IDE并启动一个新项目。 从新项目对话框( 图 1 )的项目类型下,从"visual basic"下选择"Windows"节点,然后在右窗格中选择"web控件库"模板。 键在项目的NAME 中,然后单击"行"。

打开项目后,右键单击解决方案并单击"添加"菜单选项,然后选择"新项"。 当"添加新项"对话框出现( 图 2 ) 时,选择"web自定义控件"模板。 在选择模板之后,在 NAME 字段中输入键" moebutton.vb",然后单击"添加"关闭对话框。 现在可以 delete 创建项目最初从模板初始化时创建的默认web控件。

此时,我们应该有一个开放的web控件库项目,该项目中有一个名为" moebutton.vb"的web控件。 在编写这个项目的代码之前,最后一个步骤是添加一个需要的引用。 要添加这里引用,双击解决方案资源管理器中的"我的项目"icon 以打开"我的项目"。 然后,选择"引用"选项卡,然后单击"添加"按钮。 当"添加引用"对话框打开时,选择. NET 选项卡,然后搜索列表,直到找到"系统。设计"引用。 选择这里库,然后单击"行"按钮。

图 1: Visual Studio 2005新项目对话框

图 2: 添加新项目对话框

导航回" moebutton.vb"文件,并在文件的顶部添加 导入 下面突出显示的语句:

Imports SystemImports System.ComponentModelImports System.WebImports System.Web.UIImports System.Web.UI.WebControlsImports System.Web.UI.Design
<DefaultProperty("Text"), _
 ToolboxData("<{0}:MOEbutton runat="server"></{0}:MOEbutton>")>_PublicClass MOEbutton
 Inherits WebControl

现在我们可以添加使这个控制功能成为功能所必需的代码。 ,创建几个 private member变量,用于包含用于按钮事件的路径,并使用一个HTML输入图像控件的路径,该控件将用于按钮事件的基础,而HTML输入图像控件将用作这里自定义的基础。 要完成这些步骤,请创建一个"声明"区域,并在下面的变量声明中创建关键字:

#Region"Declarations" 
 'create private member variables used by this controlPrivate mMouseOverImage AsStringPrivate mMouseOutImage AsStringPrivate mJavaScriptCall AsStringPrivateWithEvents imgButton As HtmlControls.HtmlInputImage#End Region

接下来要做的是设置几个简单的初始化设置;在 public 中我们可以这样做 新建 声明和事件( 添加"方法的MOEbuttonLoad 中的"区域和密钥如下):

#Region"Methods" 
 PublicSubNew()
 'initialize new controls with a default height and widthMe.Width = 24Me.Height = 24EndSubPrivateSub MOEbutton_Load(ByVal sender AsObject, _
 ByVal e As System.EventArgs) HandlesMe.Load
 EnsureChildControls()
 EndSub#End Region

声明变量之后,我们需要提供 public 属性来向控件用户公开控件属性,以便完成这些步骤,在下面的代码中创建一个"属性"区域和键:

#Region"Properties" 
 ' create public properties for member variables <Category("Button Images")>_
 <Browsable(True)>_
 <Description("Set path to mouseover image file.")>_
 <Editor(GetType(System.Web.UI.Design.UrlEditor),
 GetType(System.Drawing.Design.UITypeEditor))>_
 PublicProperty MouseOverImage() AsStringGetReturn mMouseOverImage
 EndGetSet(ByVal value AsString)
 mMouseOverImage = value
 EndSetEndProperty <Category("Button Images")>_
 <Browsable(True)>_
 <Description("Set path to mouseout image file.")>_
 <Editor(GetType(System.Web.UI.Design.UrlEditor),
 GetType(System.Drawing.Design.UITypeEditor))>_
 PublicProperty MouseOutImage() AsStringGetReturn mMouseOutImage
 EndGetSet(ByVal value AsString)
 mMouseOutImage = value
 EndSetEndProperty <Category("JavaScript")>_
 <Browsable(True)>_
 <Description("Set javascript string for onclick event.")>_
 PublicProperty JavaScriptCall() AsStringGetReturn mJavaScriptCall
 EndGetSet(ByVal value AsString)
 mJavaScriptCall = value
 EndSetEndProperty#End Region

注意,在每个文件路径相关属性声明上面的属性部分,代码指定了编辑器,并进一步指定了编辑器定义为URL编辑器。 将这里属性添加到控件指定如何编辑该属性;在这里实例中,控件用户在文本框右侧显示省略号。 如果用户单击按钮,IDE将打开URL编辑器,并允许用户使用该编辑器导航到图像文件,并通过该编辑器的对话框设置图像文件路径属性。

以这种方式设置的属性将保持在用户的控制项目中。 请注意,URL编辑器将使用 tilde 和斜杠对选定的路径进行前缀,这两者都不用于这里上下文。 你可能希望解析从URL编辑器返回的字符串( 在 集合集 每个图像文件路径属性的区域,在存储选定内容之前先将前两个字符删除。 这里路径将传递给" OnMouseOver"和" OnMouseOut"调用,如果存在 tilde,则文件将不会被定位。

<Editor(GetType(System.Web.UI.Design.UrlEditor), _ 
 GetType(System.Drawing.Design.UITypeEditor))>_

现在,惟一要做的就是定义控件的呈现方式。 要完成这里步骤,请创建一个"呈现"区域,并在这里区域中使用下面的代码重写 CreateChildControls() 方法:

#Region"Rendering" 
 ProtectedOverridesSub CreateChildControls()
 imgButton = New HtmlControls.HtmlInputImage()
 imgButton.Src = MouseOutImage.ToString()
 imgButton.Attributes.Add("onmouseover", "this.src='" & _
 MouseOverImage.ToString() & "';")
 imgButton.Attributes.Add("onmouseout", "this.src='" & _
 MouseOutImage.ToString() & "';")
 imgButton.Attributes.Add("onclick", JavaScriptCall.ToString())
 Controls.Add(imgButton)
 EndSub#End Region

在这个代码中,有一些值得注意的事情;首先,你会注意到一个 HtmlInputImage 控件的新实例。 创建这里对象后,它的src 属性将设置为指向 MouseOutImage 属性存储的路径。 接下来,OnMouseOverOnMouseOut 属性被添加到 imgButton 控件中,并且每当发生 OnMouseOver 或者 OnMouseOut 事件时都会更新它们的图像源文件。 接下来," OnClick"属性添加到控件,并且 JavaScriptCall 属性中包含的JavaScript字符串被分配给" OnClick"事件。 这个例子是基本的,只使用包含简单JavaScript调用的字符串,函数也可以包含外部注册JavaScript文件中包含的JavaScript函数,或者包含一个在这个类中定义的复杂函数,随后将它的注册到稍后的。

控件现在已经完成。 在测试控件之前,重新生成项目。 一旦完成并且任何遇到的错误都被修复,就是测试控件的时候了。 若要测试该控件,请将新的网站项目添加到当前打开的web控件库项目中。 创建测试网站后,通过在解决方案资源管理器中右击网站解决方案并选择"设置为启动项目"菜单选项,将测试项目设置为启动项目。 接下来,在网站解决方案中找到 Default.aspx 页面,右键单击该页面,然后选择"设置为起始页"菜单选项。

如果下载了项目,可以配置指向示例网站的虚拟目录,而不是从头开始创建一个虚拟目录。 示例项目包含两个从属项目,一个带有单个自定义web控件( MOEbutton )的web类库。

在配置示例项目并启动默认页时,你将看到在页面顶部设置的MOEbutton 控件集合,它的方式类似于工具栏的样式。 控件有一个鼠标超过效果,它的中包括一个正常版本的icon,一些用于启动警报。

除了 MOEbutton 类支持的属性,类继承自 WebControl 类,但该类的所有属性和方法都不包含任何额外的费用。 因此,不需要额外的努力来允许控件用户设置 background 颜色或者边框特征,或者定义工具提示,而不用编写任何额外的代码。

站点启动并运行后,应在浏览器窗口中观察以下显示的内容:

图 3: IE 中的MOE按钮示例


控制  图像  act  SID  Effect  按钮  
相关文章