JMiur [E]

La idea de Middle Box Links es interesante; si bien no es una solución genérica, funcionaría bien en ciertas circunstancias. De lo que se trata es de generar de manera dinámica, un botón que se muestra dentro de un DIV, que este quede centrado sin importar el contenido y además, que sea un enlace que se muestra con algún tipo de efecto.


Requiere el uso de la librería jQuery así que eso es lo primero a tener en la plantilla, la agregamos antes de </head>, por ejemplo, cargándola desde Google:
<script src="http://www.google.com/jsapi"></script>
<script> google.load("jquery", "1.3.2"); </script>
Luego, el script en si mismo que podemos ver en la pagina del desarrollador y que es algo así, aunque lo he modificado levemente a los efectos de mostrar el demo, agregando lo que está en color:
<script type='text/javascript'>
//<![CDATA[
var $el, $tempDiv, $tempButton, divHeight = 0;
$.fn.middleBoxButton = function(text, url, target) {
return this.hover(function(e) {
$el = $(this).css("border-color", "white");
divHeight = $el.height() + parseInt($el.css("padding-top")) + parseInt($el.css("padding-bottom"));
$tempDiv = $("<div />", { "class": "overlay rounded" });
// esto, crea el enlace
$tempButton = $("<a />", {
"href": url,
"target": target,
"text": text,
"class": "leermas rounded",
"css": { "top": (divHeight / 2) - 17 + "px" }
}).appendTo($tempDiv);
$tempDiv.appendTo($el);
}, function(e) {
$el = $(this).css("border-color", "#999");
$(".overlay").fadeOut("fast", function() { $(this).remove(); })
});
}
//]]>
</script>
Por último, el CSS
<style type='text/css'>
.rounded { /* una clase genérica para redondear etiquetas */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.CLM { /* el rectángulo donde mostraremos el contenido que puede tener cualquier diseño*/
border: 2px solid #666;
color: #CCC;
line-height: 1.2em !important;
margin: 0 !important;
padding: 10px 20px;
position: relative; /* esto es obligatorio */
text-align: center;
width: 300px;
}
/* el botónque se generá */
.overlay {
background: url(URL_black75.png);
background: rgba(0,0,0,0.6);
position: absolute;
bottom: 0; left: 0; right: 0; top: 0;
text-align: center;
}
/* el diseño de ese botón */
.leermas {
color: white;
background: #000;
border: 2px solid #FFF;
padding: 4px 16px;
position: relative;
text-decoration: none;
-moz-box-shadow: 0 0 20px #FFF;
-webkit-box-shadow: 0 0 20px #FFF;
box-shadow: 0 0 20px #FFF;
}
.leermas:hover { /* efecto hover sobre el texto del botón */
color: #FE4902;
}
</style>
Ahora hay que usarlo.

La forma más sencilla y flexible es crear el DIV, colocar su contenido e inmediatamente después, llamar a al función; un ejemplo:
<div class="CLM miContenido1 rounded">
....... aquí ponemos cualquier contenido ......
</div>
<script> $(function() {$(".miContenido1").middleBoxButton("Enlace a Google", "http://www.google.es/", "_blank");}); </script>
Podemos poner varios y cada uno se llama de la misma manera, dándole un nombre de clase (miContenido1, miContenido2, cualquier nombre), escribiendo el texto a mostrar, colocando la URL a abrir y, en este caso, el target (_blank indica que se abra en una nueva ventana).

Esta es una variación del mismo ejemplo y, en este caso, se abre en la misma ventana:
$(function() {$(".miContenido1").middleBoxButton("Leer más", "dirección_URL", "");});

REFERENCIAS:CSS Tricks

9 comentarios:

José GDF  

Una pregunta: ¿se podría hacer lo mismo para un elemento en línea o SPAN? ¿Habría que hacer muchos cambios en los códigos en caso afirmativo?

Me gustaría utilizarlo como llamada de atención para destacar más los enlaces externos en los posts, para animar a consultarlos, en definitiva.

Responder
Graciela  

Qué lindo queda, es una lástima :( ya sabes!

Responder
Gem@  

Es una buena idea que voy a intentar añadir con otra finalidad, si funciona te la muestro y si no, ya me tienes preguntando :)

Responder
JMiur  

José GDF:
Sí, habría que cambiar bastante y rehacer el script.

Graciela:
Ya sé, ya sé :D

Gem@
Adelante, ya logró incentivar mi curiosidad :D

Responder
Advenic  

Excelente blog Felicitaciones

Responder
Albert  

En el nuevo Youtube.com hay un instructivo que despliega transparencia dentro del browser cuando se activa el link "Mas información" y los acompañan en todo el movimiento ante cada click

Me muero por saber esta técnica supuestamente de Javascript, ¿tenés idea de como lo hizo? ¿hay algún framework para esto?

Saludos y gracias por leerme :-)

Te dejo imagen por si seguí sin entender :

http://img243.imageshack.us/img243/8946/youtubemz.jpg

Responder
JMiur  

No, no es algo que te podría contestar.

Responder
Alex Aguilar  

Hola JMiur!!!... tengo una pregunta: cómo puedo hacer para que la leyenda de "leer más" aparezca justo enseguida del texto?... porque en mis blogs aparece abajo, como aquí te señalo

LEER MAS...

Y me encantaría poder añadirlo enseguida del texto.Existe la manera de poderlo hacer de ésta forma?...LEER MAS

Responder
JMiur  

Si te refieres a ponerlo inmediatamente después del último texto de cada entrada, me parece que no, que eso no sería posible ya que s enecuentran en párrafos diferentes.

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