Un buscador estilo Mac OS X en tu sitio o blog
El buscador de Macintosh es muy popular por su estilo sofisticado que aparece en OS X, Safari y demás aplicaciones del entorno Mac. Tiene el ícono de una lupa a la izquierda que nos despliega algunas opciones de búsqueda y a medida que vamos escribiendo dentro del campo input aparece un ícono para limpiar el campo.
WebCore es un framework que incluye un motor de renderizado de HTML a Mac OS X. Mediante él podemos acceder a campos de búsqueda estilo OS X en Safari, usando atributos HTML específicos. ¡Entérate cómo lograrlo:
Un buscador estilo Mac OS X
Mediante CSS y Javascript podemos dar algo de la elegancia de la Mac a un buscador en nuestro sitio:
<span class="sbox_l"></span>
<span class="sbox"><input type="search" id="srch_fld" ¬
placeholder="Search..." autosave="bsn_srch" ¬
results="5" /></span>
<span class="sbox_r" id="srch_clear"></span>Al aplicar la hoja de estilos correspondientes obtenemos la apariencia deseada:
span.sbox_l {
background: white url('srch_l.gif') ¬
no-repeat top left;
float: left;
width: 19px; height: 19px;
}
span.sbox_r {
background: white url('srch_r.gif') ¬
no-repeat top left;
float: left;
width: 19px; height: 19px;
}
span.sbox input {
background: white url('srch_bg.gif') ¬
repeat-x top left;
float: left;
border: 0;
height: 19px; width: 142px;
padding: 3px;
font: 11px/13px arial;
color: #000;
}Los dos <span> que rodean el campo de texto tienen tamaño e imágenes de fondo que otorgan esa forma “redondeada” típica de Mac. Los bordes del campo de texto son eliminados y en cambio se le otorga un fondo que se repite. Así debería verse en tu computadora:
Notemos que hay que separar el CSS en tres archivos externos, por ejemplo: default.css para los estilos estándares, dummy.css para un comentario y applesearch.css con el markuppara Safari.
Los dos primeros se enlazan desde el head:
<link rel="stylesheet" type="text/css" ¬
href="default.css" name="default" />
<link rel="stylesheet" type="text/css" ¬
href="dummy.css" id="dummy_css" />Y mediante JS externo:
<script type="text/javascript" src="applesearch.js" ¬
/></script>Para inicializar la casilla de búsqueda al cargar el documento, ponemos la siguiente línea de Javascript también en el head:
<script type="text/javascript">
//<![CDATA[
window.onload = ¬
function () { applesearch.init(); }
//]]>
</script>La función init chequea el navegador del usuario y carga la hoja de estilos applesearch.css en caso de ser aplicable.
Si agregamos el siguiente manejador al campo input, el botón de borrar/limpiar aparece al ingresar texto dentro. Este es el código (applescript.js).
onkeyup="applesearch.onChange('srch_fld','srch_clear')"Espero que te sea muy útil este buscador, haz clic aquí para ver un ejemplo online, o descarga un zip con los archivos utilizados en esta explicación.
via ELWM
Tags: Apple, buscador, codigo, css, javascript, motor de busqueda, recursos
Deja Tu Comentario o Tus Agradecimientos: