RollOvers Revisted

分享于 

4分钟阅读

Web开发

  繁體

介绍

这里代码的重要性? 这是一种开始编写服务器控件的简单方法。 这里控件提供的功能相对简单。 几乎每个网站都有某种形式的翻转效果,这意味着这个控件也是可以重用的。 我想要一个简单的设计时间接口,以及一个更简单的运行时体验。"

使程序员更容易: 将设计时接口绑定到控件中

图 1

在图 1中,右边有带有椭圆按钮的属性。 宋体 以及 HoverImageURL ,that是使用 System.Design 创建自定义"选择图像"对话框的命名空间( 包含在 system.design.dll 内),最终从 System.Drawing.Design.UITypeEditor 在函数本身之前,使用标记将自定义属性绑定到设计时开发人员接口。 在下面的代码Fragment中 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。 快速- 简单的功能包装在一个干净的对象中。


相关文章