Tutorial | Barra de busqueda con jQuery

Tutorial | Barra de búsqueda con jQueryjQuery hace que sea fácil para darle vida a nuestras barras de búsqueda y los campos de formulario de entrada con simples toques que realmente mejora la experiencia del usuario. Vamos a ver cómo jQuery se puede utilizar para mostrar/ocultar un valor por defecto dentro de un campo y proporcionar información visual cuando se selecciona el campo.Bueno en este tutorial solo les enseñare el código, las imágenes que usare se los dejo en un rar.Imagenes:http://min.us/mlqrEihkMVamos a crear nuestro formulario de muestra, nos concentraremos más en el diseño del css y JavaScript, que en el HTML, para empezar, creamos nuestra estructura básica en HTML:Al igual que todos los formularios en la web, nuestra barra de búsqueda sencilla se crea utilizando un elemento

. Dentro de este es un

para contener a nuestros dos campos de entrada. La primera es una entrada de texto con un identificador de barra de búsqueda, que será el campo que el usuario entra en su consulta en. El segundo es un elemento presente de entrada con un ID de searchbtn, que tiene un atributo de valor de "Search" para darle un propósito descriptivo para el botón. Nuestro diseño final hará que esta entrada tenga un icono de lupa que sustituye el texto de una pista y sea más visual.Le damos un tamaño a nuestro from de 625px y un margin de 200px y auto.La forma completa puede ser de estilo con algunos simples CSS. La barra de búsqueda se le da un ancho específico de 425px, junto con algo de relleno alrededor de los bordes. Este relleno añade 20 píxeles en la parte superior e inferior, 40px a la izquierda y un gran 150px a la derecha (para acomodar el botón). Le añadimos una imagen delgada de un gradiente como fondo con "background-image" y agregamos un borde gris en el exterior, usamos un "border-radius" que se utiliza para redondear los bordes de la barra de búsqueda para apoyo a los navegadores y estilización, de lo contrario, aparecerá rectangular. El texto dentro del campo se configura como Georgia de 54px en cursiva, con una coloración gris. La última línea "outline: none;" simplemente elimina el brillo que aparece por defecto en el enfoque en Safari y Chrome.Se le da un estilo a la barra de búsqueda cuando se active. Esto se añade a jQuery después, lo que deja a la CSS para cambiar el background-image a un gradiente de color azul y un border azul claro usando imágenes y color.El botón aparece como una imagen basada en un icono, por lo que se le añaden un width y un height específicos. El botón está flotando junto a la barra, entonces se utiliza un margin de 18px para darle lugar de la parte superior para alinear verticalmente, y 115px de la izquierda para tirar de ella para sentarse dentro de la barra de búsqueda.El icono se agrega con un background-image y text-indent que se utiliza para cambiar el valor por defecto de texto fuera de la pantalla. En IE no sirve esta técnica, por lo que se puede utilizar un padding también. Para asegurar que el ratón del usuario muestra el cursor como retroalimentación, adecuada para el elemento cuando se haga clic se usa un cursor:pointer; que muestra el icono de mano típico. Como una pista visual extra el icono cambia de color de búsqueda mediante la alteración del background-position del sprite gráfico cuando el usuario se desplaza sobre ella. El formulario de búsqueda ya esta terminado y listo pero sin los efectos jQuery, Ahora vinculas la biblioteca de jQuery a nuestro documento.Ahora creamos un nuevo documento JavaScript, y lo guardamos como search.js, y lo vinculamos con nuestro formulario en el index, ahora en el siguiente documento, pondremos lo de arriba.Que servirá para añadirle los efectos de jQuery a nuestros barra de búsqueda y listo con eso ya queda terminada, solo falta que editen el script, para que funcione en su sitio y lo cambien de tamaño.GIF Espero que les haya agradado este pequeño tutorial, no olviden comentar, y cualquier duda pueden mandarme un MP, gracias.