陈词滥调的 Rollover - 重访

• 下载源代码 - 38.8 Kb

引言

这段代码为何重要？因为它是一种轻松入门编写服务器控件的方式。该控件提供的功能相对简单。几乎每个网站都有某种形式的鼠标悬停效果，这意味着该控件也将是可重用的。我希望有一个简单的设计时界面，以及一个更简单的运行时“体验”。

让程序员更容易：将设计时界面绑定到你的控件中

图 1

在图 1 中，属性右侧带有省略号按钮。 ImageURL 和 HoverImageURL 是使用 System.Design 命名空间（包含在 System.Design.dll 中）构建自定义“选择图像”对话框的属性，最终源自 System.Drawing.Design.UITypeEditor。将自定义属性绑定到设计时开发人员界面是通过在函数本身之前使用标记完成的。在以下代码片段中，EditorAttribute 是将“选择图像”对话框绑定到工具箱窗口的标记。

<Bindable(False), _
    Category("Appearance"), _
    EditorAttribute(GetType(UrlGraphicEditor), _ 
                    GetType(System.Drawing.Design.UITypeEditor)), _
    DefaultValue(""), _
    Description("This is the mouseover image for the surfer.")> _
    Public Property HoverImageUrl()...
        Get ...
        End Get
        Set ...
        End Set 
    End Property

这种结构有两个很大的好处。首先，我们可以通过继承 System.Drawing.Design.UITypeEditor 向开发人员显示任何我们想要的对话框。这很有用，因为某些信息本质上最好以可视格式表达，例如图像或绘图。其次，我们现在能够以完全抽象的表示形式将视觉信息导入到我们的组件中。例如，如果对话框显示时区列表，控件作者可能决定存储与 GMT 的偏移量。过去，作为组件作者，我们没有这种抽象级别的奢侈。因此，“设计时体验”从设计器角度来看受到了限制。

设计表面

将此工具箱项目拖放到设计表面后，并设置了一些属性，UI 会生成以下标记。

<cc1:hoverbutton id=HoverButton1 runat="server" 
        HoverImageUrl="logoBW225x72.gif" 
        ImageUrl="logo225x72.gif" 
        NavagationURL="WebForm1.aspx" 
        BorderWidth="0px"></cc1:HoverButton>

用户：即使是最不擅长技术的用户，也可以运行此控件

用户的计算机从服务器请求页面。然后，服务器生成一些漂亮的客户端 JavaScript，如下所示

<script DEFER = true language= "javascript" type="text/javascript"> <!-- 
    function newRollOver(targetDOmUrlName,URL){ 
        var img = document.images; 
        var i =0;
        // Look Though the DOM images for the one that is named 
        // correctly, then preform the swap.        
        for(i=0; i < img.length; i++)
            if (img[i].name == targetDOmUrlName) img[i].src = URL; 
    }
//--> </script>

当用户将鼠标悬停在图像上时，会调用此客户端脚本，并且计算机将图像切换到替代 URL。瞧——简单的功能封装在一个干净整洁的对象中。