Personalizando un poco los buscadores (2)

¿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

Ingrese términos a buscar

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

Ingrese su búsqueda:

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>