¿Y si empleamos
LightWindow para mostrar el buscador?
Eso es posible ya que nos permite mostrar contenido oculto y, en este caso, sólo le debemos indicar el
ID del bloque oculto, precedido por el símbolo
#:
<a class="lightwindow"
href="#nombreUnico"
params="lightwindow_width=ancho,lightwindow_height=alto">
Texto o Imagen del enlace</a>
Donde el ancho y el alto serán el tamaño de la ventana modal que vamos a abrir.
Ese bloque oculto, contendrá el formulario:
<div id="nombreUnico" style="display:none;">
....... aquí ponemos el contenido del formulario .......
</div>
Por supuesto, podemos colocar cualquiera de las variantes anteriores, usar colores, fondos e imágenes. Este es un ejemplo cuyo código está en este
ZIP 
Pero
LightWindow no es la única forma de hacer esto, en realidad, los trucos de
mantener elementos ocultos y mostrarlos sólo bajo ciertas condiciones sirven para casi todo. Son sencillo de implementar y ahorran espacio. Uno de tantos es el que muestran en
PHP Development donde, con un pequeño
script llamado
Dropdown Box, se pueden agregar controles desplegables como menúes, cajas de texto o formularios.
Como usan una técnica
JavaScript interesante, modificándola un poco puede adaptarse para, por ejemplo, colocar un buscador oculto que sólo se despliegue cuando hacemos
click.
Este es un modelo cualquiera que utiliza ese
script donde, casi todo es
CSS. Haciendo
click se despliega y volviendo a hacer
click, se oculta:
BUSCADOR
El ejemplo completo puede descargarse de este
ZIP donde se incluye el
script, las imágenes usadas y el código tal cual se muestra en esta entrada.
El
script es muy sencillo y lo podemos copiar y pegar directamente en la plantilla agregando la etiqueta correspondiente justo antes de
</head>:
<script type="text/javascript">
[ aqui va el código ]
</script>
o bien guardar el archivo en un servidor externo y luego cargarlo:
<script type="text/javascript" src="URL_attachBuscador.js"></script>
function at_attach(enlaceB,formularioB) {
var elEnlace = document.getElementById(enlaceB); // ID del enlace
var elFormulario = document.getElementById(formularioB); // ID del formulario a mostrar
elEnlace['auxiliar'] = elFormulario.id;
elFormulario['auxiliar'] = elFormulario.id;
elEnlace.onclick = mostraocultarFORM; // mostrar u ocultar el formulario
elFormulario.onmouseover = mostrarFORM; // mantener el formulario visible
// desmarcar para que desaparezca al quitar el mouse
// elFormulario.onmouseout = ocultarFORM;
}
function mostrarFORM() {
document.getElementById(this['auxiliar']).style.display = 'block';
}
function ocultarFORM() {
document.getElementById(this['auxiliar']).style.display = 'none';
}
function mostraocultarFORM() {
var cual = document.getElementById(this['auxiliar']);
if (cual.style.display != 'block') {
cual.style.display = 'block';
} else {
cual.style.display = 'none';
}
return false;
}Para usarlo, sólo necesitamos unas pocas líneas de código y establecer las propiedades CSS. Empecemos con estas, hay cinco declaraciones y las propiedades pueden variar, salvo las expresamente indicadas:
<style>
#demoSEARCH { /* es el pseudo-enlace que expande y contrae el buscador */
cursor: pointer;
/* otras propiedades de estilo */
}
#demoSEARCHform { /* es el formulario que contiene el buscador */
display: none;
/* otras propiedades de estilo */
}
#demoSEARCHform p { /* es el texto superior */
/* otras propiedades de estilo */
}
#demoSEARCHinput { /* es el control donde se ingresa la búsqueda */
text-align: center;
/* otras propiedades de estilo */
}
#demoSEARCHboton { /* es el botón de envío del formulario */
cursor: pointer;
/* otras propiedades de estilo */
}
</style>
En el código HTML, sólo hay dos detalles a tener en cuenta, tanto el pseudo-enlace para expandir y contraer (etiqueta DIV) como el formulario (etiqueta FORM) deben tener un parámetro ID o sea, nombres únicos:
<div id="demoSEARCH">BUSCADOR</div>
<form method="get" action="http://nombreblog.blogspot.com/search" id="demoSEARCHform">
<p>Ingrese su búsqueda:</p>
<input id="demoSEARCHinput" type="text" value="" name="q" />
<input id="demoSEARCHboton" value="Buscar" type="submit" />
</form>
<script type="text/javascript">
at_attach('demoSEARCH','demoSEARCHform');
</script>
Leer más
Sumario
¿O será como dicen algunos, que es el símbolo del infinito?
Adiós G, te extrañaremos.
Hola g, te descargaré desde el servidor a ver si logro acostumbrarme a tu presencia.
