[转]让你的网页文本框增加光晕效果与唤醒,水印(类似QQ2011)

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

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

咱们还了解默认的Asp.Net文本框很难看的,看到QQ2011版的登录输入文本框那种光晕效果,不免被我们十分是心仪,不过我查了源码却发现凡是经C++实现的,那哪在咱们的Asp.Net中添加相同的效能为?先被大家秀一下己之运行截图:

默认文本框样式:C++ 1  

鼠标移入文本框:C++ 2

举凡未是非常酷呢?下面我拿逐一说如何做下的?首先我们建立一个WebSite应用程序。在起来举行事先起一个文书夹plugins/textbox并引入Jquery库,在textbox子文件夹下重添加一个images文件夹(包含一布置背景图:border.png),大概的文书夹结构应当如下:

C++ 3

就我们开始规划简约版的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结构:

C++ 4😉

<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>

C++ 5😉

举凡无是调用更简单了,封装的十足好了将。接下来,我以带大家编写更为关键之CSS和JQuery插件。

第一看插件,由于力量需求不妨命名也jquery.textbox.js:

C++ 6😉

(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);

C++ 7😉

针对插件中动用的体裁文件(jquery.textbox.css)在偏下:

C++ 8😉

.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; }

C++ 9😉

除此以外,我拿背景图片(border.png)也粘上,

C++ 10

这些准备工作开得了事后,你尽管好错过浏览这些漂亮的成效了。其实,这个功能还有很多改善之地方,比如可以加上水印,添加tooltip效果,添加搜索图标,添加键盘图标等等。我以在事后的插件开发中持续创新与百科,欢迎大家共同来欣赏。有趣味之情侣以此间下载新版源码(解压后可打开demo.htm欣赏效果)。

 

累全面网页文本框系列之二(增加水印以及提醒)

以达成一样不善我计划了一个拉动光晕的文本框,类似于QQ2011,给我们的网页增加了美感和旺盛。最后,我留下大家之凡对文本框的接轨优化,这次我长了水印效果以及提醒效果。可能多丁说这些以Jquery中早已产生内置插件了,为什么还得协调失去描绘吧?我从的正式是:“拿来主义”分情况。对于早已满足我们渴求还易于配置的之插件,我们直接以来用便是。但是于非可知满足我们要求还自己既不行复杂的插件,则还乐于自己动手去形容,以便了解所有插件的宏图流程。下面就是无赘述了,先来拘禁水印吧。我们考虑了一个不过简易的事例就是日常的文本框(<input
type=’text’ id=’txtName’
value=”>),不外乎就是出发textbox的focus和blur事件作出不同之应。以下是关键的公文结构和重要代码:

C++ 11

jquery.watermark.1.0.js:

C++ 12😉

(function ($) {     $.fn.watermark = function (defaultText) {         return this.each(function () {             var $this = $(this);             var text = $this.val();             if (defaultText) {                 text = defaultText;                 $this.val(text).addClass("watermark");             }             $this.focus(function () {                 if ($this.val() == defaultText) {                     $this.val('').removeClass("watermark");                 }             }).blur(function () {                 if ($this.val() == '') {                     $this.val(defaultText).addClass("watermark");                 }             });         });     } })(jQuery);

C++ 13😉

在意其中有一个css效果,watermark:

C++ 14😉

.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; } .watermark {     color: #999; }

C++ 15😉

当插件写好下,我们开利用这插件,前台页面如下:

C++ 16😉

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>     <link href="[path]/Scripts/plugins/textbox/textbox.css" rel="stylesheet" type="text/css" /> </head> <body>     <input type="text" id="name" class="textbox" /><br />     <br />     <input type="password" id="password" class="textbox" />     <script src="[path]/Scripts/plugins/textbox/jquery-1.5.1.min.js" type="text/javascript"></script>     <script src="[path]/Scripts/plugins/textbox/jquery.textbox.js" type="text/javascript"></script>     <script src="[path]/Scripts/plugins/textbox/jquery.watermark.js" type="text/javascript"></script>     <script type="text/javascript">         $(document).ready(function () {             $("#name").textbox().watermark("用户名");             $("#password").textbox().watermark("密码");         });     </script> </body> </html>

C++ 17😉

当运行后您就可以看到成效:

默认以及鼠标离开(未填写任何值)的成效:

C++ 18

鼠标上后的效益:

C++ 19

当填写文字之后的意义:

C++ 20

举凡无是颇到呢?但是我们发现密码很约就没有这样幸运了,它的水印文字也变成了黑点,如下图:

C++ 21

岂惩罚呢?我们要扩大我们的水印插件以支持密码水印效果。细想一下,我们得以窥见密码框和文本框除了type不等同,其他都为同的。此时,我们考虑以盘活的文书框作支撑,辅助实现密码水印效果。目标是动态配置一个暨密码等宽登高的文本框来兑现与密码框的切换(在focus和blur事件中)。由于要支持先的插件,因此我们单独对密码框来拓展处理,我们可以通过以下语句来罗密码框:

var ispwd = $this.attr("type").toLowerCase() == "password";

以下是自扩展以后支持密码框的水印效果(注意高亮处):
jquery.watermark.1.1.js:

C++ 22😉

(function ($) {     $.fn.watermark = function (defaultText) {         return this.each(function () {             var $this = $(this);             var ispwd = $this.attr("type").toLowerCase() == "password";             var text = $this.val();             if (defaultText) {                 text = defaultText;                 if (ispwd) {                     var tb = $("<input type='text' class='textbox'/>");                     $this.hide().parent().append(tb.addClass("watermark").width($this.width()).val(text));                 } else {                     $this.val(text).addClass("watermark");                 }             }             if (ispwd) {                 $this.next().focus(function () {                     if ($this.next().val() == defaultText) {                         $this.next().hide().end().show().focus();                     }                 }).end().blur(function () {                     if ($this.val() == '') {                         $this.hide().next().show();                     }                 });             } else {                 $this.focus(function () {                     if ($this.val() == defaultText) {                         $this.val('').removeClass("watermark");                     }                 }).blur(function () {                     if ($this.val() == '') {                         $this.val(defaultText).addClass("watermark");                     }                 });             }         });     } })(jQuery);

C++ 23😉

召开了这些干活儿晚,再次运行前的页面,你见面发现密码水印效果变成了此样子:

C++ 24

当输入密码时,密码框变成:

C++ 25

这般虽宏观兑现文本框和密码框的水印效果了。接下来,我们累追究提示的兑现力量,其实是职能都当jquery中实现,其原理是:设置元素的title属性,然后为div浮动的花样来表现。

C++ 26😉

(function($){     $.fn.tooltip = function(options) {         var defaults = {              activation: "hover",             keepAlive: false,             maxWidth: "200px",             edgeOffset: 3,             defaultPosition: "bottom",             delay: 400,             fadeIn: 200,             fadeOut: 200,             attribute: "title",             content: false, // HTML or String to fill TipTIp with              enter: function(){},               exit: function(){}           };          var opts = $.extend(defaults, options);                    // Setup tip tip elements and render them to the DOM         if($("#tiptip_holder").length <= 0){              var tiptip_holder = $('<div id="tiptip_holder" style="max-width:'+ opts.maxWidth +';"></div>');             var tiptip_content = $('<div id="tiptip_content"></div>');             var tiptip_arrow = $('<div id="tiptip_arrow"></div>');             $("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')));         } else {             var tiptip_holder = $("#tiptip_holder");             var tiptip_content = $("#tiptip_content");             var tiptip_arrow = $("#tiptip_arrow");         }                  return this.each(function(){             var org_elem = $(this);             if(opts.content){                 var org_title = opts.content;             } else {                 var org_title = org_elem.attr(opts.attribute);             }             if(org_title != ""){                 if(!opts.content){                     org_elem.removeAttr(opts.attribute); //remove original Attribute                }                 var timeout = false;                                  if(opts.activation == "hover"){                     org_elem.hover(function(){                         active_tiptip();                     }, function(){                         if(!opts.keepAlive){                             deactive_tiptip();                         }                     });                     if(opts.keepAlive){                         tiptip_holder.hover(function(){}, function(){                             deactive_tiptip();                         });                     }                 } else if(opts.activation == "focus"){                     org_elem.focus(function(){                         active_tiptip();                     }).blur(function(){                         deactive_tiptip();                     });                 } else if(opts.activation == "click"){                     org_elem.click(function(){                         active_tiptip();                         return false;                     }).hover(function(){},function(){                         if(!opts.keepAlive){                             deactive_tiptip();                         }                     });                     if(opts.keepAlive){                         tiptip_holder.hover(function(){}, function(){                             deactive_tiptip();                         });                     }                 }                              function active_tiptip(){                     opts.enter.call(this);                     tiptip_content.html(org_title);                     tiptip_holder.hide().removeAttr("class").css("margin","0");                     tiptip_arrow.removeAttr("style");                                          var top = parseInt(org_elem.offset()['top']);                     var left = parseInt(org_elem.offset()['left']);                     var org_width = parseInt(org_elem.outerWidth());                     var org_height = parseInt(org_elem.outerHeight());                     var tip_w = tiptip_holder.outerWidth();                     var tip_h = tiptip_holder.outerHeight();                     var w_compare = Math.round((org_width - tip_w) / 2);                     var h_compare = Math.round((org_height - tip_h) / 2);                     var marg_left = Math.round(left + w_compare);                     var marg_top = Math.round(top + org_height + opts.edgeOffset);                     var t_class = "";                     var arrow_top = "";                     var arrow_left = Math.round(tip_w - 12) / 2;
                    if(opts.defaultPosition == "bottom"){                         t_class = "_bottom";                        } else if(opts.defaultPosition == "top"){                             t_class = "_top";                        } else if(opts.defaultPosition == "left"){                            t_class = "_left";                        } else if(opts.defaultPosition == "right"){                            t_class = "_right";                        }                                          var right_compare = (w_compare + left) < parseInt($(window).scrollLeft());                     var left_compare = (tip_w + left) > parseInt($(window).width());                                          if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){                         t_class = "_right";                         arrow_top = Math.round(tip_h - 13) / 2;                         arrow_left = -12;                         marg_left = Math.round(left + org_width + opts.edgeOffset);                         marg_top = Math.round(top + h_compare);                     } else if((left_compare && w_compare < 0) || (t_class == "_left" && !right_compare)){                         t_class = "_left";                         arrow_top = Math.round(tip_h - 13) / 2;                         arrow_left =  Math.round(tip_w);                         marg_left = Math.round(left - (tip_w + opts.edgeOffset + 5));                         marg_top = Math.round(top + h_compare);                     }
                    var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop());                     var bottom_compare = ((top + org_height) - (opts.edgeOffset + tip_h + 8)) < 0;                                          if(top_compare || (t_class == "_bottom" && top_compare) || (t_class == "_top" && !bottom_compare)){                         if(t_class == "_top" || t_class == "_bottom"){                             t_class = "_top";                         } else {                             t_class = t_class+"_top";                         }                         arrow_top = tip_h;                         marg_top = Math.round(top - (tip_h + 5 + opts.edgeOffset));                     } else if(bottom_compare | (t_class == "_top" && bottom_compare) || (t_class == "_bottom" && !top_compare)){                         if(t_class == "_top" || t_class == "_bottom"){                             t_class = "_bottom";                         } else {                             t_class = t_class+"_bottom";                         }                         arrow_top = -12;                                                 marg_top = Math.round(top + org_height + opts.edgeOffset);                     }                                      if(t_class == "_right_top" || t_class == "_left_top"){                         marg_top = marg_top + 5;                     } else if(t_class == "_right_bottom" || t_class == "_left_bottom"){                                 marg_top = marg_top - 5;                     }                     if(t_class == "_left_top" || t_class == "_left_bottom"){                             marg_left = marg_left + 5;                     }                     tiptip_arrow.css({"margin-left": arrow_left+"px", "margin-top": arrow_top+"px"});                     tiptip_holder.css({"margin-left": marg_left+"px", "margin-top": marg_top+"px"}).attr("class","tip"+t_class);                                          if (timeout){ clearTimeout(timeout); }                     timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay);                     }                                  function deactive_tiptip(){                     opts.exit.call(this);                     if (timeout){ clearTimeout(timeout); }                     tiptip_holder.fadeOut(opts.fadeOut);                 }             }                         });     } })(jQuery);      

C++ 27😉

C++ 28😉

#tiptip_holder {     display: none;     position: absolute;     top: 0;     left: 0;     z-index: 99999; }
#tiptip_holder.tip_top {     padding-bottom: 5px; }
#tiptip_holder.tip_bottom {     padding-top: 5px; }
#tiptip_holder.tip_right {     padding-left: 5px; }
#tiptip_holder.tip_left {     padding-right: 5px; }
#tiptip_content {     font-size: 11px;     color: #fff;     text-shadow: 0 0 2px #000;     padding: 4px 8px;     border: 1px solid rgba(255,255,255,0.25);     background-color: #191919;     background-color: rgba(25,25,25,0.92);     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));     border-radius: 3px;     -webkit-border-radius: 3px;     -moz-border-radius: 3px;     box-shadow: 0 0 3px #555;     -webkit-box-shadow: 0 0 3px #555;     -moz-box-shadow: 0 0 3px #555; }
#tiptip_arrow, #tiptip_arrow_inner {     position: absolute;     border-color: transparent;     border-style: solid;     border-width: 6px;     height: 0;     width: 0; }
#tiptip_holder.tip_top #tiptip_arrow {     border-top-color: #fff;     border-top-color: rgba(255,255,255,0.35); }
#tiptip_holder.tip_bottom #tiptip_arrow {     border-bottom-color: #fff;     border-bottom-color: rgba(255,255,255,0.35); }
#tiptip_holder.tip_right #tiptip_arrow {     border-right-color: #fff;     border-right-color: rgba(255,255,255,0.35); }
#tiptip_holder.tip_left #tiptip_arrow {     border-left-color: #fff;     border-left-color: rgba(255,255,255,0.35); }
#tiptip_holder.tip_top #tiptip_arrow_inner {     margin-top: -7px;     margin-left: -6px;     border-top-color: #191919;     border-top-color: rgba(25,25,25,0.92); }
#tiptip_holder.tip_bottom #tiptip_arrow_inner {     margin-top: -5px;     margin-left: -6px;     border-bottom-color: #191919;     border-bottom-color: rgba(25,25,25,0.92); }
#tiptip_holder.tip_right #tiptip_arrow_inner {     margin-top: -6px;     margin-left: -5px;     border-right-color: #191919;     border-right-color: rgba(25,25,25,0.92); }
#tiptip_holder.tip_left #tiptip_arrow_inner {     margin-top: -6px;     margin-left: -7px;     border-left-color: #191919;     border-left-color: rgba(25,25,25,0.92); }
/* Webkit Hacks  */ @media screen and (-webkit-min-device-pixel-ratio:0) {     #tiptip_content     {         padding: 4px 8px 5px 8px;         background-color: rgba(45,45,45,0.88);     }     #tiptip_holder.tip_bottom #tiptip_arrow_inner     {         border-bottom-color: rgba(45,45,45,0.88);     }     #tiptip_holder.tip_top #tiptip_arrow_inner     {         border-top-color: rgba(20,20,20,0.92);     } }

C++ 29😉

作了这些下,我们开设计前台页面调用:

C++ 30😉

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>     <link href="[path]/Scripts/plugins/tooltip/tooltip.css" rel="stylesheet" type="text/css" /> </head> <body>     <input type="text" id="name" class="textbox" title="请填写姓名" />     <input type="text" id="phone" class="textbox" title="请填写电话,格式:(010)87524576" />     <script src="[path]/Scripts/plugins/textbox/jquery-1.5.1.min.js" type="text/javascript"></script>     <script src="[path]/Scripts/plugins/textbox/jquery.textbox.js" type="text/javascript"></script>     <script src="[path]/Scripts/plugins/tooltip/jquery.tooltip.js" type="text/javascript"></script>     <script type="text/javascript">         $(document).ready(function () {             $("#name").textbox({ label: "姓名" }).tooltip();             $("#phone").textbox({ label: "电话" }).tooltip();         });        </script> </body> </html>

C++ 31😉

当运行页面后,你见面发觉文本框的唤起功能:

C++ 32

C++ 33

大凡勿是当比以前的alert以及模态框更发生用户体验吧?我眷恋就是无须多言了咔嚓。至此,我们做得了了水印以及提醒的效益。总结一句话:插件的目的在于增加用户体验,封装所有细节,提供极致简易的调用接口。
有趣味之对象于此间下载新版源码(解压后得以打开demo.htm欣赏效果)。
也许,这尚尚无完结,我下一致说道也将提供带图标的文本框以及智能感知效果的文本框,这些留给大家想想,我会逐步扩展并提供最终落实,欢迎交流。

 

正文转自:http://www.cnblogs.com/hmiinyu/archive/2011/12/23/2299891.html  
hmiinyu