We all know that the default Asp.Net textbox very ugly, log in to see the QQ2011 version of the input text box kind of halo effect, can not help but make us very long for, but I see the source code was found to be achieved by C ++, that how to add the same functionality in our Asp.Net it in? Give everyone show them my run shot:
The default text box style:
Mouse into the text box:
Is not it cool? Now I'll explain how to do it? First, we build a WebSite application. Established before beginning to make a folder plugins / textbox and introduced Jquery library subfolder in the textbox to add a images folder (containing a background image: border.png), probably folder structure should be as follows:
Then we began to design a rough version of the html structure is as follows:
<div class='span'>姓名</div>
<div class='aq_box'>
<div class='aq_box_wrap'>
<input type="text" id="name" class="textbox" label="姓名" />
</div>
</div>
The very simple, we found that there are several places contained class and pseudo-attribute label, but according to my ideas, hoping to make it into the plug, the user calls, so it is convenient. I will give the calling code and html structure:
<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>
Is not calling more simple, the package is good enough. Next, I'll take you to write more critical of CSS and JQuery plugin.
First look at the plug-in, due to the functional requirements might be named 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);
Plug-in application style file (jquery.textbox.css) in the following:
.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;
}
In addition, I will background image (border.png) also Tieshanglai
After these preparatory work done, you'll be able to browse these wonderful effects. In fact, this feature there are many areas for improvement, for example, you can add watermark, add tooltip effects, add the search icon to add a keyboard icon and so on. I will continue to update and improve in the future development of the plug-in, welcome to enjoy together. Interested friends here to download the new version of the source code (after decompression can be opened demo.htm appreciate the effect).
Reproduced in: https: //www.cnblogs.com/hmiinyu/archive/2011/12/23/2299891.html