Efecto deslizante (slide) para entradas expandibles
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("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</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='"javascript:toggleIt("" + data:post.id + "");"' 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='"Effect.toggle(\"" + data:post.id + "\",\"slide\");"' 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.
![[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihK06o3qxRgndTN83gagg5xMy8Y0s4rg9GCiBabAgKpoFDpCUkp8Al_rfR6HKBuaEHmmst0IOnxKE7V2kHfX63AoPgzF_mZQ-nZ-Bkj4vdbhyphenhyphenPMU_bP1Dk_0ZJf_4_NgJh7dzseZHN7Okh/s72-c/calculadora.JPG "[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)")
No hay comentarios :
Publicar un comentario