使用AnyButton创建动态图像按钮

分享于 

8分钟阅读

Web开发

  繁體

3 supported states - default, hover and press

介绍

我们都有这样的问题- 设计我们的网站来有一定的外观和感觉。 很不幸,并非每个访问者都会按照你希望的方式查看站点。 这是由于不同的操作系统呈现本机浏览器控件的不同。 OS X 中的按钮具有 aqua 外观,而 Windows 2000中的按钮看起来是灰色和过时的。

使用 AnyButton

现在,为了实现一致的外观,流行的选项是使用图像作为按钮。 这是一个很好的选择,除非添加新按钮或者修改现有的按钮,否则最好使用 Photoshop [and the time]。

我创建了一个名为 AnyButton的控件,它派生自 System.Web.UI.WebControls.ImageButton 这里按钮使用图像模板作为外观。 它将以 JPG。GIF或者PNG作为模板。 它很容易使用,而且最好的是,看起来像一个真正的按钮。 这里控件与 IE6.Firefox。Netscape和Safari浏览器兼容。

控件将单个图像作为模板进行处理。 按钮支持三种不同状态- defaulthoverpress。 此外,每个按钮支持三个不同的外观- 每个状态 1个。 这允许你根据类型的Button 类创建多种类型的按钮。 例如,你可以使用 XPButtonAquaButtonAmazonComButton,等等,如果你看到一个网站上的按钮,就可以打开中间部分了。

下面是一个使用XP按钮作为皮肤的示例:

  • 这是我将分配给按钮的默认状态模板:

  • 这是我将分配给按钮的悬停状态模板:

  • 这是我将分配给按钮的新闻状态模板:

如你所见,红色的线条指示如何将按钮切片。 这些线条必须是RGB颜色( 255,0,0 ) 或者 #FF0000.

每个按钮都有一个 ButtonConfig 类作为属性。 ButtonConfig 类包含关于按钮模板的所有信息。 下面是使用所有按钮状态的示例,生成一个类似于 XP Silver按钮的按钮:

///<summary>/// Default button templated to resemble the Silver XP Button///</summary>publicclass XPButton : AnyButton
{
 public XPButton()
 {
 this.EnableHover = true;
 this.EnablePress = true;
 }
 public XPButton(Page page)
 {
 this.Page = page;
 this.EnableHover = true;
 this.EnablePress = true;
 }
 protectedoverridevoid OnInit(EventArgs e)
 {
 Initialize();
 base.OnInit(e);
 }
 protectedoverridevoid OnLoad(EventArgs e)
 {
 base.OnLoad(e);
 }
 protectedvoid Initialize()
 {
 Font f = new Font("Tahoma", 8, FontStyle.Regular);
 ButtonConfig buttonConfig = new ButtonConfig();
 buttonConfig.TemplatePath = "~/xp_button/default.png";
 buttonConfig.OutputPath = "~/output/xp";
 buttonConfig.Font = f;
 buttonConfig.VerticalTextOffset = 1;
 buttonConfig.FontColor = Color.Black;
 this.Config = buttonConfig;
 ButtonConfig hoverConfig = new ButtonConfig();
 hoverConfig.TemplatePath = "~/xp_button/hover.png";
 hoverConfig.OutputPath = buttonConfig.OutputPath;
 hoverConfig.Font = buttonConfig.Font;
 hoverConfig.VerticalTextOffset = buttonConfig.VerticalTextOffset;
 hoverConfig.FontColor = buttonConfig.FontColor;
 this.HoverConfig = hoverConfig;
 ButtonConfig pressConfig = new ButtonConfig();
 pressConfig.TemplatePath = "~/xp_button/press.png";
 pressConfig.OutputPath = buttonConfig.OutputPath;
 pressConfig.VerticalTextOffset = buttonConfig.VerticalTextOffset + 1;
 pressConfig.HorizontalTextOffset = buttonConfig.VerticalTextOffset + 1;
 pressConfig.Font = hoverConfig.Font;
 pressConfig.FontColor = buttonConfig.FontColor;
 this.PressConfig = pressConfig;
 }
}

这个例子非常简单。 要注意的一点是,pressConfig 中使用了 VerticalTextOffsetHorizontalTextOffset 属性。 要获得 true 按下效果,文本应该按 1像素移动到右下 1像素。

这个例子演示了如何创建一个XP主题的按钮。 我已经将 XPButton 与AnyButton程序集一起打包,以便你立即开始。 这样做是为了让你不用模板( XP ) 就可以使用 AnyButton,马上就可以了。 XPButton的三个状态模板作为DLL的一部分来嵌入。 调用 XPButton 时,它需要将模板提取到指定路径。 通过 TemplateExtractPath 属性可以设置这里路径。 这里属性仅对 XPButton 是唯一的,并且仅用于提取它的模板。

当从 AnyButton 派生的按钮被调用时,它必须将这些生成的图像保存到磁盘上的某个位置以便以后使用。 每种类型按钮上的每个状态技术上都有不同的输出路径。 很可能,输出路径对于按钮的所有状态都是相同的。 若要设置输出路径,请使用 OutputPath 属性。 这里属性将接受应用程序范围路径( ~/)。 ASPNET用户帐户必须对这里路径具有读/写访问权限。

到现在为止? 使用该控件是最容易的部分。 请看一下:

<%@RegisterTagPrefix="btn"Namespace="MyNamespace"Assembly="MyAssembly"%><btn:XPButtonRunat="server"Text="Click Me"/>

这是上一次调用的结果:

可以看到,创建了三个图像;每个状态为 1. 现在,任何带有文本"单击我"的XPButton 请求都将被重定向到已经生成的按钮图像。 若要清除图像的缓存,只需删除输出目录。

其他属性:
  • AlphaPng

    如果你使用PNG文件,并且希望实施透明度,请将 AlphaPng 设置设置为 true 这是必需的,因为 IE 不支持 alpha PNG ( 右上)。 当 AlphaPngtrue 一个特殊的CSS过滤器将只添加到 IE 用户的(。Firefox,Safari,等等 用户不会受到影响)。

  • TextWidth

    如果要强制特定宽度而不考虑文本的实际宽度,请使用这里属性。

  • OnClientClick

    可以在标记添加客户端函数调用时设置的便捷小属性当按下按钮时。

  • AntiAliasText

    true 默认情况下,应用反走样和 ClearType 效果。

  • CausesPostback

    默认情况下,ImageButton ( 从此控件派生的) 是提交按钮。 若要禁用回发,请将 CausesPostback 设置为 false

  • ForceRedraw

    这不是一个属性,而是一个 QueryString 变量,当它出现时,会强制重新绘制按钮的重绘,忽略缓存。 [ 示例用法:http://www.mysite.com/default.aspx?ForceRedraw=true.]

这几乎就是所有的。

链接


图像  动态  Using  按钮  buttons  ANY  
相关文章