Atlas学习手记(13):使用TextBoxWatermark为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>

  编译运行,就可以看到效果了

  用户输入:

本文作者:



相关阅读:
Uchome1.2 1.5 代码学习 common.php
Windows 任务管理器使用技巧
验证SQL保留字
Discuz X2程序将面包屑导航中的forum.php去掉
如何使页面打开时input就被选中?
dz asp.net论坛中函数--根据Url获得源文件内容
asp的一个日期格式化函数
PHP教程:挖掘细节提升网站性能
Linux系统下超级终端Minicom的使用方法
js之点击 超连接,提示一个层.点击空白.层消失
Oracle备份知识:简单实现逻辑备份
命令行小技巧 使用大括号扩展参数的方法
javascript 屏蔽鼠标键盘的几段代码
SNS网站个性展示技巧:图片幻灯片切换
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4