Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1046907
  • 博文数量: 254
  • 博客积分: 10185
  • 博客等级: 上将
  • 技术积分: 2722
  • 用 户 组: 普通用户
  • 注册时间: 2007-07-25 15:04
文章存档

2011年(8)

2009年(1)

2008年(31)

2007年(214)

分类: 系统运维

2007-08-27 10:19:35

      TextBoxWatermarkExtender用于对TextBox添加水印效果。

下面请看一个示例:

1)在VS2005中新建一个ASP.NET AJAX-Enabeld Web Project项目工程,命名为TextBoxWatermarkExtender1。

2)在Default.aspx中添加两个TextBox,分别用于输入FirstName 和LastName。然后对每个TextBox添加一个TextBoxWatermarkExtender控件,用于添加水印效果。

代码如下:
1        FirstName:  
2        <asp:TextBox ID="txtFirstName" runat="server" CssClass="unwatermarked">asp:TextBox> 
3        <cc1:textboxwatermarkextender id="TextBoxWatermarkExtender1" runat="server" targetcontrolid="txtFirstName" WatermarkCssClass="watermarked" WatermarkText="please input the first name">cc1:textboxwatermarkextender>
4        <br />
5        LastName:  
6        <asp:TextBox ID="txtLastName" runat="server" CssClass="unwatermarked">asp:TextBox>
7        <cc1:textboxwatermarkextender id="TextBoxWatermarkExtender2" runat="server" targetcontrolid="txtLastName" WatermarkCssClass="watermarked" WatermarkText="please input the last name">cc1:textboxwatermarkextender>
8        <br />

属性说明:

         TargetControlID:该控件的目标关联控件。
         WatermarkCssClass:产生水印效果的css样式。
         WatermarkText:有水印效果时,水印上的文本。
         
3)要看到水印效果的关键的css样式。

代码如下:
1        .watermarked {
2            height:20px;
3            width:150px;
4            padding:2px 0 0 2px;
5            border:1px solid #BEBEBE;
6            background-color:#F0F8FF;
7            color:gray;
8        }
    

4)在页面上添加一个UpdatePanel控件,在该控件中添加一个Button和Label,用于显示用户的输入。

代码如下:

1        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
2            <ContentTemplate>
3                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" />
4                <br />
5                <br />
6                <asp:Label ID="message" runat="server">asp:Label>
7            ContentTemplate>
8        asp:UpdatePanel>

Button按钮的处理代码:
            this.message.Text = "欢迎你:" + this.txtFirstName.Text + " " + this.txtLastName.Text;

5)按下CTRL+F5,在浏览器里查看效果。

效果图如下:

 
阅读(1805) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~