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

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

 

主要内容

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 >

它的属性很简单，如下表所示：

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

二．完整示例

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

<% @ Register Assembly="AtlasControlToolkit" 

            Namespace="AtlasControlToolkit" 

            TagPrefix="atlasToolkit"  %>

再定义两个CSS样式，分别作为TextBox的样式和加上水印效果的样式：

<style type="text/css">

    .unwatermarked  {} {

        height:23px;

        width:148px;

        font-weight:bold;

    }

    .watermarked  {} {

        height:23px;

        width:150px;

        padding:2px 0 0 2px;

        border:1px solid #BEBEBE;

        background-color:#F0F8FF;

        color:gray;

    }           

</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