viernes, 13 de diciembre de 2013

Campo de texto de búsqueda deslizable con Jquery y CSS3


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



Buscar:


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://lh3.googleusercontent.com/-WJMeN2WJWB4/UqtSHs2YrTI/AAAAAAAAGbk/5m_mStlCkew/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: