JMiur [E]

¿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

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>

11 comentarios:

Mundo Libre10  

Soberbio y unico, bien gran Jmiur importantisimo post felicitaciones.

A personalizas los buscadores se ha dicho ;)

Responder
JMiur  

Espero que lo consiga y avise a ver que ha salido :D

Responder
Sharck_Bloody  

che, este es el mismo scrip que usas por ejemplo para mostrar y ocultar videos, si es asi explicas como hacerlo en algun post?

Responder
JMiur  

No, son dos cosas diferentes.

Responder
Lstg-atajar  

hola esto lo he podido poner a la primera y funciona estupendamente graciasssssssssss
un saludo

Responder
Di Musiikkia  

JMiur

Puse el buscador que salio nuevo en los gadget's de blogger, y se la pasa cargandu y nunca lo hace, lo mismo pasa con las noticias...

q puede ser??

gracias

Responder
JMiur  

Parecería no cargarse en absoluto ¿has intentado eliminarlo y volverlo a colocar? Es que no hay ningún detalle que pueda configurarse en ese gadget.

Responder
Di Musiikkia  

si si lo he intentado, pero... tendria algo q ver que le haya cambiado el link (nombre de la pagina)... osea cambie la direccion

Responder
JMiur  

No sabría decirte pero, se supone que si la cambias y vuelves a colocarlo desde cero, debería tomar el nuevo nombre.

Responder
Di Musiikkia  

bueno perdon ahi por la molestia, pero el icono de "editar rapido" (esas herramientas q estan en cada gadget)... estan malos tambien dice q esa pagina no existe en el nuevo nombre del blog... podria ser eso... ja! como molesto yo

bueno muchisimas gracias..

Responder
JMiur  

Si. Obviamente algo está mal. Deberías recurrir a los grupos de ayuda de Google a ver si ellos tienen alguna explicación.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR