Efecto Toggle en los gadgets de la sidebar

Parece que últimamente todos nos pusimos de acuerdo en preguntar de qué forma se consigue el efecto deslizante en los gadgets de la sidebar, en concreto el de Directorios. Así que vamos a explicarlo y los interesados ya pueden ponerse manos a la obra.

El efecto deslizante se consigue con las API de Google. El API de bibliotecas AJAX carga las bibliotecas JavaScript de software libre más populares entre ellas Prototype y Scriptaculous, eso nos evita buscar alojamientos externos y su funcionamiento es mucho más rápido.

Vamos a necesitar Prototype y Acriptaculous y las añadiríamos justo antes de </head> lo siguiente:

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>

Con anterioridad lo añadimos en los siguientes ejemplos (si ya lo tuviéramos no es necesario volver a añadirlo)

Ir a inicio con efecto deslizante
"Imagen multiusos"
Subir y bajar con efecto deslizante
Efecto deslizante en los archivos de la sidebar

Para crear el efecto deslizante en los directorios o cualquier otro gadget lo que haremos será añadir un título al gadget para localizarlo con más facilidad.

En plantilla de Edición de HTML los gadgets se muestran como widgets más o menos así:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML1' locked='false' title='Directorios' type='HTML'/>

<b:widget otro gadget/>

<b:widget otro gadget/>

<b:widget otro gadget/>

</b:section>

</div>

Si marcamos para expandir la plantilla veremos que a cada widget le preceden unas líneas, en ellas veremos la etiqueta <data:title/> es la que genera el título del gadget.

Añadiremos Effect.toggle de Scriptaculous que nos permite mostrar y ocultar con distintos efectos cualquier contenido.

En nuestro código añadiremos lo marcado en negrita:

<b:widget id='HTML1' locked='false' title='Directorios' type='HTML'>

<b:includable id='main'>

<a href='#' onclick='Effect.toggle(&quot;Directorios&quot;,&quot; appear &quot;); return false'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'>[+/-]<data:title/></h2>

</b:if>

</a><div align='center' id='Directorios' style='display: none;'>

<div class='widget-content'>

<data:content/>

</div>
</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Debemos tener en cuenta que cada id debe ser único, si ya tenemos un id llamado Directorios no podemos crear otro con el mismo nombre.

El título, hace las veces de enlace, no hay problema si no deseamos añadir [+/-]porque seguirá funcionando. Si preferimos sustituirlo por una imagen es conveniente sea tipo icono para que el tamaño no se vea desproporcionado.

<img src="url-imagen"/>

También podemos situarlo a la derecha del título, es decir a la derecha de <data:title/>

Rosa explicó en su momento la forma de añadir el efecto slide en cualquier gadget incluidas las etiquetas.

Visitando a J.Miur podemos ver en sus ejemplos los distintos efectos que podemos añadir appear, slide o blind .

appear es el que viene definido en los pasos que seguimos anteriormente si deseamos cualquier otro simplemente debemos sustituir el nombre del efecto que en el código está marcado con fondo azul, como ejemplo sería algo así:

DEMO con appear