Atlas学习手记（13）：使用TextBoxWatermark为TextBox加上水印效果

TextBoxWatermark是AtlasControlToolkit中的一个Extender，它能够为ASP.NET中的TextBox加上水印效果，在用户还没有输入内容时可以显示一些提示信息给用户，这种效果在很多网站都有应用。

主要内容[/b]

1．TextBoxWatermark Extender介绍

2．完整示例

TextBoxWatermark是AtlasControlToolkit中的一个Extender，它能够为ASP.NET中的TextBox加上水印效果，在用户还没有输入内容时可以显示一些提示信息给用户，这种效果在很多网站都有应用。示例代码如下：

<atlasToolkit:TextBoxWatermarkExtender ID="TBWE2"

runat="server">

<atlasToolkit:TextBoxWatermarkProperties

TargetControlID="TextBox1"

WatermarkText="Type First Name Here"

WatermarkCssClass="watermarked"

</atlasToolkit:TextBoxWatermarkProperties>

</atlasToolkit:TextBoxWatermarkExtender>
它的属性很简单，如下表所示：

属性[/b]	说明[/b]
TargetControlID	目标TextBox的ID
WatermarkText	用户没有输入前显示的文字
WatermarkCssClass	用户没有输入前的CSS样式

二．完整示例[/b]

下面看一个完整的示例，新建一个Web Site后，在ASPX页面中顶部加入对AtlasControlToolkit

<style type="text/css">

</style>
在页面中再添加两个TextBox控件，我们将对这两个TextBox控件添加水印效果：

<div>

<h3>First name:

<asp:TextBox ID="txt_FirstName"

CssClass="unwatermarked" Width="150"

runat="server"></asp:TextBox></h3>

<h3>Last name:

<asp:TextBox ID="txt_LastName"

CssClass="unwatermarked" Width="150"

runat="server"></asp:TextBox></h3>

</div>
现在就可以添加TextBoxWatermarkExtender了，分别指定参数如下：

<atlasToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server">

<atlasToolkit:TextBoxWatermarkProperties

TargetControlID="txt_FirstName"

WatermarkText="Type First Name Here"

WatermarkCssClass="watermarked">

</atlasToolkit:TextBoxWatermarkProperties>

<atlasToolkit:TextBoxWatermarkProperties

TargetControlID="txt_LastName"

WatermarkText="Type Last Name Here"

WatermarkCssClass="watermarked">

</atlasToolkit:TextBoxWatermarkProperties>

</atlasToolkit:TextBoxWatermarkExtender>
编译运行，就可以看到效果了



用户输入：



完整示例下载：http://files.cnblogs.com/Terrylee/TextboxWatermarkDemo.rar