aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

La influencia de Apple, está muy latente en el desarrollo web y no es para menos, el conjunto de diseño limpio y usable es algo ideal para lo que el desarrollo web moderno intenta conseguir con las páginas web.

Una muestra de ello es este motor de búsqueda desarrollado en Javascript/CSS para emular el «searchbox» del sistema operativo de Apple. He estado mirando el código fuente y no me ha acabado de gustar la idea de usar <span></span> para alojar elementos que deberían ser inputs.

Por ese motivo me he tomado la libertad de modificar el CSS y adaptar a jQuery un par de líneas que son realmente las necesarias para dotar este tipo de elementos al aspecto de Mac OS X que queremos darle.

HTML

<form name="form" class="searchbox" action="" method="post">
<p>
    <input type="text" name="s" value="" class="search"/>
    <input type="reset" name="reset" value="Reset" />
    <input type="submit" value="Enviar" />
</p>
</form>

La estructura es, a mi entender, algo más correcta ya que simplemente nos basamos de los elementos HTML que componen un formulario normal. Usando la class searchbox para indicar al javascript que ese formulario va a ser tratado para emular el searchbox de Mac OS X.

En este código, usaremos el botón reset para emular el botón (x) que vemos en la parte derecha del <input /> y la lupa que vemos en la parte izquierda del <input /> será nuestro botón de submit y el que nos llevará a la siguiente página.

CSS

.searchbox .resetButton  {
	background: white url("i/srch_r.gif") no-repeat scroll left top;
	width: 19px;
	height: 19px;
	border:0;
	text-indent:-5000;
	position:absolute;
	margin-left:-18px;
}
.searchbox .delete {
	background: white url("i/srch_r_f2.gif") no-repeat scroll left top;
}

.searchbox .submitButton {
		background: white url('i/srch_l.gif') no-repeat top left;
		width: 19px; height: 19px;
		text-indent:-5000;
		border:0;
		position:absolute;
}

.searchbox input.search {
	height:19px;
	padding-left:10px;
	width:600px;
}

Este código, consigue que nuestro input tenga el aspecto que deseamos, simplemente usamos la class searchbox para cambiar los estilos de los elementos que hay dentro.

Javascript

$.extend({
    searchbox: function() {
        var isSafari = /Apple/.test(navigator.vendor);
        var isOpera = window.opera;
        var input = $("form.searchbox input:text");
        var submit = $("form.searchbox input:submit");

        $("form.searchbox input:reset").each(function(x, el){
                $(el).addClass("resetButton");
                $(el).bind("click", function(){
                        $(this).removeClass("delete");
                });
        });

        $("form.searchbox input:submit").each(function(x, el){ $(el).addClass("submitButton");});

        input.css({
                "height": (isOpera || isSafari)?"13px":"14px",
                "padding-left" : (isOpera || isSafari)?"15px":"10px",
                "outline":"none"
                });
        var corrector = (isOpera || isSafari)?29:21;
        $("input.submitButton").css("margin-left", "-" + input.width() - (corrector) + "px");


        input.bind("keyup", function(){
            if($(this).val() != '') $(this).parent().find("input:reset").addClass("delete");
            else $(this).parent().find("input:reset").removeClass("delete");
        });
    }
});
// Activamos al cargar la página.
$(document).ready(function(){
        $.searchbox();
})

Usando jQuery como base, extendemos las opciones del framework con el método extend() que nos permite definir nuevas opciones de forma fácil y limpia. Esta nueva funcionalidad, nos añade los estilos necesarios para los usuarios que disponen de javascript.

Ventajas

Al necesitar javascript para aplicar los estilos los usuarios que no disponen de ellos ven un formulario compuesto por un <input /> en el que pueden introducir un lo que están buscando y dos botones, uno que nos limpiará el formulario y el botón de submit que nos permite enviar el valor del elemento a nuestra página de resultados. Para ello he usado este gran artículo de Olga Carreras en el que nos muestra las diferentes formas de crear formularios con varios botones.

Problemas

Pese a que he podido probarlo en Firefox 3, Safari y Opera no he podido verlo en Internet Explorer, aunque seguro que falla, el text-indent no le gustaba, así que tendré que testearlo cuando tenga tiempo.

Demo

Podéis ver como se vería en el ejemplo que he montado. Creo que como idea puede valer 😉