Bienvenid@s, a continuación os voy a mostrar un ejemplo de como crear un campo de texto de búsqueda deslizable mediante Jquery y CSS3, este efecto de deslizamiento es muy llamativo y lo he visto integrado en algunas plantillas de Wordpress, por curiosidad he querido hacer el código para realizar el efecto y la verdad que no es nada complicado, únicamente hay que detectar los eventos focus y blur y crear un par de clases, añadir o remover según el evento, también he utilizado efectos de animación con @keyframes de CSS3, para darle un efecto de retardado, a continuación puedes ver el ejemplo ...
Y a continuación puedes ver el código del ejemplo ...
<!DOCTYPE HTML>
<html>
<head>
<title>Campo de texto de búsqueda deslizable</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
/* Campo de texto de búsqueda deslizable */
$(function(){
$("#textbox").focus(function(){
$(this).removeClass("textbox-disallow").addClass("textbox-active");
});
$("#textbox").blur(function(){
$(this).removeClass("textbox-active").addClass("textbox-disallow");
});
});
</script>
<style>
#textbox
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4XZyAGJgDmhL6GirH5a3xa_UxEg9To5ImiPpLkT1iqqsg6h2JTXgSDTrj_CEcKpSJYO7_7GnVLQvtC2KjmYWbc_HKseIOzCzit56tBTe4_adprfqKC0h_i4ZxbbWJwTTWdo1hqU6_dwY/w30-h27-p/ico_search.png) no-repeat scroll 7px 7px;
background-position: right;
font-size: 18px;
padding: 10px;
border: 1px solid grey;
border-radius: 4px;
}
.textbox-disallow
{
animation: disallow 1s;
-webkit-animation: disallow 1s; /* Safari and Chrome */
width: 80px;
}
.textbox-active
{
animation: active 1s;
-webkit-animation: active 1s; /* Safari and Chrome */
width: 300px;
}
@keyframes disallow
{
from {width:300px;}
to {width:80px;}
}
@keyframes active
{
from {width:80px;}
to {width:300px;}
}
</style>
</head>
<body>
<h1>By http://jquery-manual.blogspot.com</h1>
<form id="form">
Buscar: <input type="text" class="textbox-disallow" id="textbox" placeholder="Buscar" />
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario