Javascript实战应用篇(1)：让你的网页文本框增加光晕效果(类似QQ2012)
我们都知道默认的Asp.Net文本框很丑陋的，看到QQ2011版的登录输入文本框那种光晕效果，不免让我们很是向往，不过我查看了源码却发现是通过C++实现的，那如何在我们的Asp.Net中添加同样的功能呢？先给大家秀一下我的运行截图：
默认文本框样式：
鼠标移入文本框：
是不是很酷呢？下面我将一一解释如何做出来的？首先我们建立一个WebSite应用程序。在开始做之前建立一个文件夹plugins/textbox并引入Jquery库，在textbox子文件夹下再添加一个images文件夹(包含一张背景图:border.png)，大概的文件夹结构应该如下：
接着我们开始设计粗略版的html结构，大致如下：
<div class='span'>姓名</div>
<div class='aq_box'>
<div class='aq_box_wrap'>
<input type="text" id="name" class="textbox" label="姓名" />
</div>
</div>
很简单把，我们发现其中有几个地方包含了class以及伪属性label，但是根据我的想法，希望将它做成插件，给用户调用，这样就很方便了。我先给出调用代码和html结构:
<head>
<title></title>
<link href="jquey.textbox.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery.textbox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#name").textbox();
});
</script>
</head>
<body>
<input type="text" id="name" class="textbox" label="姓名" />
</body>
是不是调用更简单了，封装的足够好了把。接下来，我将带大家编写更为关键的CSS和JQuery插件。
首先看插件，由于功能需求不妨命名为jquery.textbox.js:
(function ($) {
$.addTextBox = function (t, p) {
p = $.extend({
width: 174
}, p);
var span = $.trim($(t).attr("label"));
if (span != "") {
$(t).before("<div class='span'>" + span + "</div>");
}
$(t).wrap("<div class='aq_box'><div class='aq_box_wrap'></div></div>")
.parents(".aq_box")
.siblings().removeClass("hover").end()
.hover(function () {
$(this).toggleClass("hover");
}, function () {
$(this).toggleClass("hover");
})
.find(".textbox").width(p.width);
};
var docloaded = false;
$(document).ready(function () {
docloaded = true
});
$.fn.textbox = function (p) {
return this.each(function () {
if (!docloaded) {
var t = this;
$(document).ready(function () {
$.addTextBox(t, p);
});
} else {
$.addTextBox(this, p);
}
});
}; //end textbox
})(jQuery);
对插件中应用的样式文件(jquery.textbox.css)在以下:
.span
{
padding: 3px 2px 0 0;
float: left;
display: inline;
}
.textbox
{
border: 0px;
height: 22px;
line-height: 22px;
overflow: hidden;
background: url(images/border.png) 0 -72px repeat-x;
}
.aq_box
{
padding-left: 3px;
background: url(images/border.png) left -24px no-repeat;
float: left;
}
.aq_box_wrap
{
padding-right: 3px;
background: url(images/border.png) right -24px no-repeat;
}
.aq_box.hover
{
background-position: left top;
}
.aq_box.hover .aq_box_wrap
{
background-position: right top;
}
.aq_box.hover .textbox
{
background-position: 0 -48px;
}
另外，我将背景图片(border.png)也贴上来，
这些准备工作做完之后，你就可以去浏览这些美妙的效果了。其实，这个功能还有很多改进的地方，比如可以添加水印，添加tooltip效果，添加搜索图标，添加键盘图标等等。我将在以后的插件开发中继续更新和完善，欢迎大家一起来欣赏。有兴趣的朋友在这里下载新版源码(解压后可以打开demo.htm欣赏效果)。
