让你的网页文本框增加光晕效果与提示,水印(类似QQ2011)

本文转自:http://www.cnblogs.com/xiaofengfeng/archive/2013/01/28/2880344.html

让你的网页文本框增加光晕效果(类似QQ2011)

我们都知道默认的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欣赏效果)。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。