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'>Agrega lo que est? en color rojo, y listo.
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<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>
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:
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.
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.
No comments:
Post a Comment