mas-audaz: Expandir y contraer gadgets con jQuery

sábado, 31 de mayo de 2014

Expandir y contraer gadgets con jQuery

Hace ya algún tiempo vimos cómo expandir y contraer gadgets usando Scriptaculous y Prototype, es un método que funciona bien, pero hay quienes usan jQuery y no quieren cargar más librerías en su blog, así que en esta entrada veremos cómo conseguir el mismo resultado pero usando jQuery.

Expandir y contraer gadgets puede servir a quienes tienen muchos gadgets y quieren que la sidebar se vea más despejada mostrando sólo los títulos de los gadgets, y mostrando el contenido sólo cuando el usuario quiera verlo. Puedes ver un ejemplo en este blog de pruebas, al dar click sobre el título del gadget éste se expandirá.

Para poner estos gadgets expandibles sólo necesitas jQuery, si aún no lo tienes entra en Plantilla | Edición de HTML, y después de <head> agrega esta línea:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

Y ahora, para aplicar el efecto expandible -y deslizante- a algún gadget, localiza en la Edición de HTML el gadget al que se lo quieres aplicar. Por ejemplo, un gadget del tipo HTML/Javascript sería así:

<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'>
<span id='expandirGadget1' style='cursor:hand;cursor:pointer;'>
▼▲
<data:title/>
</span>
</h2>
</b:if>
<div class='widget-content'>
<div class='expandir1' style='display: none;'>

<data:content/>

</div>
<script>$(document).ready(function(){$('#expandirGadget1').click(function(){$('.expandir1').slideToggle("slow")})});</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Agrega lo que está en color rojo, y listo.

Para guiarte dónde poner los códigos:

El primer código en rojo va alrededor de la etiqueta <data:title/>
La otra parte en rojo va después de <div class='widget-content'>
Y la última va antes de

</div>

<b:include name='quickedit'/>

Nota que en color azul verás un ID y una clase, ambos aparecen dos veces. Si pusieras otro gadget expandible deberás cambiar tanto los IDs como las clases, por ejemplo expandirGadget2 y expandir2

En el primer fragmento que añadimos verás que aparecen estos caracteres: ▼▲
Esas son las flechas de arriba y abajo ▼▲ puedes cambiarlo por otro caracter, otro texto, o incluso por una imagen:

<img src='URL de la imagen' border='0' width='14px'/>

El código de ejemplo es para los gadgets HTML/Javascript, pero se puede aplicar a cualquier otro, sólo basta con identificar la etiqueta <data:title/> del gadget (que es donde va el primer código), y el contenido del gadget (que es donde va el segundo código).

Quizá deba aclarar que esto no hace que el blog cargue más rápido ya que el contenido se sigue cargando aun cuando esté oculto para el usuario. Es únicamente para mostrar menos espacio en la sidebar ya que algunas veces tenemos gadgets que ocupan demasiado espacio y esta es una buena manera de mostrar el blog más prolijo.

Imprimir artículo