martes, 9 de diciembre de 2008

Expandir/contraer gadgets con javascript

Actualización:
Si deseas que el expandir y contraer tenga un efecto deslizante con Scriptaculous mira esta entrada


Vamos a ver cómo expandir y contraer [+/-] cualquier gadget con javascript.

Para expandir y contraer cualquier gadget con javascript seguimos los siguientes pasos:

1.§ Vamos a Diseño - Edición de HTML y Expandir plantillas de artilugios.

2.§ Ahora , con ayuda de CTRL+F buscaremos el nombre que le dimos al gadget al que vamos a aplicar el efecto de [+/-].

Por ejemplo, digamos que mi gadget se llama Blogroll,el nombre deberemos de buscarlo en la plantilla y deberá de tener la siguiente estructura:

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


3.§ Con mucho cuidado insertamos lo que está resaltado en negrita; debemos de tener en cuenta que el código puede cambiar un poco según cada plantilla, pero nos guiaremos por el código que está debajo de las líneas que pegaremos:


<b:widget id='HTML1' locked='false' title='Blogroll' type='HTML'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>&#9660;&#47;&#9650;
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<data:content/>
</div>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Damos click a guardar.

No hay comentarios:

Publicar un comentario