02 septiembre 2009

Efecto deslizante (slide) para entradas expandibles

 
Expandir/contraer
Usando este efecto las entradas se abren y se cierran con un efecto deslizante muy agradable y que además es muy sencillo deincorporar a los títulos de las entradas expandibles, tanto si estamos usándolas
en la página principal, como en las páginas de etiquetas.




[1] Para aplicar el efecto deslizante, necesitamos usar las librerías (Prototype y Scriptaculous) de las que hablamos en una entrada anterior.



[2] Estas librerías las incluimos en la plantilla con un script de Google API y tendremos que añadirlo debajo de <head>:


<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->


[3] Localizamos ahora con los artilugios expandidos, esta línea que forma parte del código que habíamos añadido para nuestras entradas expandibles:


<a expr:onclick='&quot;javascript:toggleIt(&quot;&quot; + data:post.id + &quot;&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>


[4] La sustituimos por esta otra línea y guardamos los cambios:


<a expr:onclick='&quot;Effect.toggle(\&quot;&quot; + data:post.id + &quot;\&quot;,\&quot;slide\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>


Puedes comprobar el resultado pinchando en el [+/-] que acompaña al título de mis entradas expandibles en las páginas de etiquetas.

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo