zoukankan      html  css  js  c++  java
  • 使用TextBoxWatermark为TextBox加上水印效果

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

     

    主要内容

    1TextBoxWatermark Extender介绍

    2.完整示例

     

    TextBoxWatermarkAtlasControlToolkit中的一个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

    目标TextBoxID

    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>

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

    用户输入:

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

  • 相关阅读:
    将数据挂载到 docker 容器中的3种方式:volume、bind mount、tmpfs
    kubectl 常用命令
    Kubernetes 知识点
    spring boot 学习资料
    docker 常见系统镜像
    docker 的前台模式和后台模式
    Docker容器里的进程为什么要前台运行?相同的问题:docker运行apache为什么带FOREGROUND参数?docker运行nginx为什么带`daemon off`参数?
    spring cloud 各核心组件作用
    nginx 镜像使用说明
    optimization.splitChunks 中,chunks 的3个值:all、async、initial 的含义
  • 原文地址:https://www.cnblogs.com/kokoliu/p/468331.html
Copyright © 2011-2022 走看看