saiba como se faz:..."Expandir e recolher qualquer gadget"
Autor: Edilene brandao da silva | Publicado: 2010-11-16T05:18:00-08:00


[+/-]   Expandir y contraer cualquier gadget 


"Habíamos visto antes como  expandir y contraer el gadget de "Etiquetas" usando un sencillo script y poco después también vimos como hacerlo con los gadgets de "Archivos" y "Feed"."




" Me ha llegado un email de     Woody Jagger  donde me pregunta como hacer esto mismo con cualquier otro gadget  (Perfil, Archivos, Lista de Blogs, etc.), así que vamos a ver como  aplicar el efecto de "expandir y contraer" a cualquier otro gadget de  los que incluimos normalmente en la sidebar."
"Una vez que incluimos uno de estos gadget, en la parte de " Edición HTML" de nuestro panel y expandiendo las plantillas de artilugios,  podemos ver que la estructura de cualquiera de los gadgets añadidos es  muy similar, en algunos casos idéntica&nbsp; o&nbsp; parecida a esta" 
&lt;b:widget id='Text1' locked='false' title='Bienvenidos' type='Text'&gt;
&lt;b:includable id='main'&gt;
&lt;!-- only display title if it's non-empty --&gt;
&lt;b:if cond='data:title != &amp;quot;&amp;quot;'&gt;
&lt;h2 class='title'&gt;&lt;data:title/&gt;&lt;/h2&gt;
&lt;/b:if&gt;
&lt;div class='widget-content'&gt;
&lt;data:content/&gt;
&lt;/div&gt;

&lt;b:include name='quickedit'/&gt;
&lt;/b:includable&gt;
&lt;/b:widget&gt; "Para aplicar este script en cualquiera de estos gadget, solo tendremos que fijarnos bien en que parte hemos de añadir las piezas de código que componen el script y que, en todos los casos, es el mismo código (el resaltado en negrita"...
):
&lt;b:widget id='Text1' locked='false' title='Bienvenidos' type='Text'&gt;
&lt;b:includable id='main'&gt;
&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('&lt;a href="#" onclick="tmp =  document.getElementById(&amp;quot;' + rnd + '&amp;quot;);  tmp.style.display = (tmp.style.display == &amp;quot;none&amp;quot;) ?  &amp;quot;block&amp;quot; : &amp;quot;none&amp;quot;; return false;"  style="float:left;margin-right:5px;"&gt;');
//]]&gt;
&lt;/script&gt;[+/-]
&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
document.write('&lt;\/a&gt;');
//]]&gt;
&lt;/script&gt; 
&lt;!-- only display title if it's non-empty --&gt;
&lt;b:if cond='data:title != &amp;quot;&amp;quot;'&gt;
&lt;h2 class='title'&gt;&lt;data:title/&gt;&lt;/h2&gt;
&lt;/b:if&gt;
&lt;div class='widget-content'&gt;
&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
document.write('&lt;div id="' + rnd + '" style="display:none;"&gt;');
//]]&gt;
&lt;/script&gt; 
&lt;data:content/&gt;
&lt;/div&gt;
&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
document.write('&lt;\/div&gt;');
//]]&gt;
&lt;/script&gt; 
&lt;b:include name='quickedit'/&gt;
&lt;/b:includable&gt;
&lt;/b:widget&gt;
" Si queremos sustituir el símbolo de expandir y contraer [+/-] por una imagen, colocamos directamente en su lugar el código para mostrar la imagen"&lt;img src="url_de_la_imagen"/&gt;
Ver ejemplo funcionando

fonte e créditos:http://elescaparatederosa.blogspot.com/search/label/Gadget?updated-max=2010-01-17T14%3A59%3A00%2B01%3A00&amp;max-results=20?max-results

traduzindo: 

[+/-]   "Expandir e recolher qualquer gadget" 


"Como vimos antes expandir e recolher as etiquetas gadgetcomo fazer com gadgets "Arquivos" e "Alimentação". usando um script simples e logo depois também vimos " 




"Recebi um e-mail Woody Jagger  onde eles me perguntam como fazer isso com qualquer outro gadget  (perfil, arquivos, lista de blogs, etc.), então vamos ver como aplicar o  efeito de "expansão e contração" para qualquer outro gadget que  normalmente incluem o barra lateral."

"Quando um desses gadgets incluídos na parte " Edição de HTML"É o nosso painel e expandir a modelos de widgetsPodemos  ver que a estrutura de qualquer um dos gadgets adicionou é muito  semelhante, em alguns casos idênticos ou semelhantes a este''
 
id = locked='false' &lt;b:widget "Text1" title='Bienvenidos' type='Text'&gt;
id = 'main' &lt;&gt; b: includable
&lt;-! Mostrar apenas o título se for não-vazio -&gt;
cond = 'data: &lt;b:if título != ""'&gt;
class =&gt; 'title' &lt;h2 &lt;data:title/&gt; &lt;/ h2&gt;
&lt;/ B: if&gt;
class='widget-content'&gt; &lt;div
&lt;data:content/&gt;
&lt;/ Div&gt;

name = 'QuickEdit' /&gt; &lt;b: includable 
&lt;/ B: includable&gt;
&lt;/ B: widget&gt;" Para aplicar esse script em qualquer um dos gadgets, apenas tem que boa aparência nessa parte temos de acrescentar pedaços de código que compõem o roteiro e que em todos os casos é o mesmo código&nbsp;
(em negrito)"


id = locked='false' &lt;b:widget "Text1" title='Bienvenidos' type='Text'&gt; id = 'main' &lt;&gt; b: includable type='text/javascript'&gt; &lt;script
//&lt;![ CDATA [
if (typeof (rnd) == 'undefined') var rnd ='';
rnd = Math.floor (Math.random () * 1000);
rnd = 'id' + rnd;
document.write ('&lt;a href = "#" onclick = "tmp =  document.getElementById ("' + rnd + '"); tmp.style.display =  (tmp.style.display ==" none " ?) "bloco": "nenhum"; return false; "style  =" float:;: 5px ;"&gt;'); margem esquerda-direita
//]]&gt;
&lt;/ &gt;[+/-] Script
type='text/javascript'&gt; &lt;script
//&lt;![ CDATA [
document.write ('&lt;\ / a&gt;');
//]]&gt;
&lt;/ Script&gt; &lt;-! Mostrar apenas o título se for não-vazio -&gt; cond = 'data: &lt;b:if título != ""'&gt; class =&gt; 'title' &lt;h2 &lt;data:title/&gt; &lt;/ h2&gt; &lt;/ B: if&gt; class='widget-content'&gt; &lt;div type='text/javascript'&gt; &lt;script
//&lt;![ CDATA [
document.write ('div id="' style="display:none;"&gt; "rnd + +');
//]]&gt;
&lt;/ Script&gt; &lt;data:content/&gt; &lt;/ Div&gt; type='text/javascript'&gt; &lt;script
//&lt;![ CDATA [
document.write ('&lt;\ / div&gt;');
//]]&gt;
&lt;/ Script&gt; name = 'QuickEdit' /&gt; &lt;b: includable &lt;/ B: includable&gt; &lt;/ B: widget&gt;



Se nós substituir o símbolo Expandir / Recolher [+/-] por uma imagem, colocada diretamente em colocar o código para exibir a imagem:
&lt;img src="url_de_la_imagen"/&gt;
Veja exemplo de trabalho 
 
























vc está em:
http://aprender-ensinar-compartilhar.blogspot.com  &nbsp;



&nbsp;