ajax控件之TextBoxWatermarkExtender

作者在 2008-05-05 17:28:43 发布以下内容
控件名:TextBoxWatermarkExtender
效果和用途:这个控件的用途其实很广,在一个textbox中写上提示信息,当鼠标移到上面的时候,则提示消失
属性:
         TargetControlID:该控件的目标关联控件。
         WatermarkCssClass:产生水印效果的css样式。
         WatermarkText:有水印效果时,水印上的文本。


1.拖放textbox控件到页面。
2.拖放TextBoxWatermarkExtender控件到页面,设置属性
3.配合css样式会让这个控件更加的漂亮。

  <style type="text/css">
        .unwatermarded
        {
            height:18px;
            ;
            font-weight:bold;
        }
       
        .watermarked
        {
            height:20px;
            ;
            padding:2px 0 0 2px;
            border:1px solid #BEBEBE;
            background-color:#F0F8FF;
            color:gray;
        }
    </style>
   
eg:

<head runat="server">
    <title>无标题页</title>
   
    <style type="text/css">
        .unwatermarded
        {
            height:18px;
            ;
            font-weight:bold;
        }
       
        .watermarked
        {
            height:20px;
            ;
            padding:2px 0 0 2px;
            border:1px solid #BEBEBE;
            background-color:#F0F8FF;
            color:gray;
        }
    </style>
   
</head>
<body style="text-align: center">
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        用户名: 
        <asp:TextBox ID="TextBox1" runat="server" CssClass="unwatermarded"></asp:TextBox>
        <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1"
            WatermarkText="用户名必须以字母开头" WatermarkCssClass="watermarked">
        </cc1:TextBoxWatermarkExtender>
   
    </div>
    </form>
</body>


效果图:

 
————————————————————
技术日志 | 阅读 3263 次
文章评论,共0条
游客请输入验证码