给文本框加上提示效果

最新推荐文章于 2024-01-08 17:16:41 发布

joyhen

最新推荐文章于 2024-01-08 17:16:41 发布

阅读量1w

点赞数

分类专栏： ASP.NET

本文链接：https://blog.csdn.net/Joyhen/article/details/8486686

版权

ASP.NET 专栏收录该内容

111 篇文章 0 订阅

订阅专栏

我们需要四个东西：图片、样式表、jquery库、页面代码

全部代码在这里：http://pan.baidu.com/share/link?shareid=200436&uk=2266385818

图片见demo里面：下面我们一个一个来：

1.css

/*=================全局样式【start】======================*/
*{
	scrollbar-face-color:#E6F2FD;
	scrollbar-highlight-color:#ffffff;
	scrollbar-shadow-color:#D6E4EF; 
	scrollbar-3dlight-color:#F1F9FF; 
	scrollbar-arrow-color:#006699; 
	scrollbar-track-color:#F1F9FF; 
	scrollbar-darkshadow-color:#F1F9FF;
}
body{
	margin:0px;
	color:#666;
	background-color:#FFF;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
}
form,ul,li{
	margin:0px;
	list-style-type:none;
	padding:0px;
}
table { empty-cells: show; border-collapse: collapse; }
a{
	color:#005eac;
	text-decoration:none;
}
a:visited,a:active{ color:#005eac; }
a:hover{ color:#ff5500; }
img{ border:0px; vertical-align:middle; }
/*=================全局样式【end】======================*/
.input{
	padding:0px 3px;
	border:1px solid #d1d1d1;
	background:url(input_bg.jpg) repeat-x;
	height:18px;
	line-height:18px;
	font-size:12px;
	color:#999;
}
.textarea{
	padding:3px;
	border:1px solid #d1d1d1;
	background:url(input_bg.jpg) repeat-x;
	font-size:12px;
	color:#999;
}
.focus{
	border:1px solid #FC0 !important;
	background:url(focus_bg.jpg) repeat-x !important;
	color:#333 !important;
}

/*提示文字样式*/
#HintMsg{
	width:271px;
	position:absolute;
	display:none;
}
#HintMsg .HintTop{
	height:9px;
	background:url(hintbg1.gif) no-repeat;
	overflow:hidden;
}
#HintMsg .HintInfo{
	padding:0 5px;
	border-left:1px solid #000;
	border-right:1px solid #000;
	background:#FFFFE1;
	line-height:1.5em;
}
#HintMsg .HintInfo b{
	display:block;
	margin-bottom:6px;
	padding-left:15px;
	background:url(hint.gif) left center no-repeat;
	height:13px;
	line-height:16px;
}
#HintMsg .HintInfo b span{
	display:block;
	float:right;
	text-indent:-9999px;
	background:url(close.gif) no-repeat;
	width:12px;
	height:12px;
	cursor:pointer;
}
#HintMsg .HintFooter{
	height:22px;
	background:url(hintbg2.gif) no-repeat;
}
/*设置提示样式*/

2.页面代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>文本框提示demo</title>
    <link href="images/example.css" rel="stylesheet" type="text/css" />    
</head>
<body>
    <form id="form1" runat="server">
    <div style=" margin:0 auto; width:600px;">
        <div style=" height:100px;"></div>
        <asp:TextBox ID="txtA" runat="server" CssClass="input" HintTitle="提示" HintInfo="这是提示的内容你懂的" />
        <br /><br />
        <asp:TextBox ID="txtB" runat="server" CssClass="textarea"  Height="130px" Width="500px" maxlength="250"
            HintTitle="标题你懂的" HintInfo="填写一些内容" TextMode="MultiLine" />
    </div>
    </form>
</body>
</html>

3.添加js到head里面

    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".input,.textarea").focus(function () {
                $(this).addClass("focus");
            }).blur(function () {
                $(this).removeClass("focus");
            });

            $("[HintTitle],[HintInfo]").focus(function (event) {
                $("*").stop(); //停止所有正在运行的动画
                $("#HintMsg").remove();
                var HintHtml = "<ul id=\"HintMsg\"><li class=\"HintTop\"></li><li class=\"HintInfo\"><b>" + $(this).attr("HintTitle") + "</b>" + $(this).attr("HintInfo") + "</li><li class=\"HintFooter\"></li></ul>";
                var offset = $(this).offset(); //取得事件对象的位置
                $("body").append(HintHtml); //添加节点
                $("#HintMsg").fadeTo(0, 0.85);
                var HintHeight = $("#HintMsg").height(); //取得容器高度
                $("#HintMsg").css({ "top": offset.top - HintHeight + "px", "left": offset.left + "px" }).fadeIn(500);
            }).blur(function (event) {
                $("#HintMsg").remove();
            });
        });
    </script>

效果如下：