saiba como se faz:..."Expandir e recolher qualquer gadget"

[+/-]

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  o  parecida a esta"

<b:widget id='Text1' locked='false' title='Bienvenidos' type='Text'>
<b:includable id='main'>
<!-- 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'>
<data:content/>
</div>

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

"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"...
):

<b:widget id='Text1' locked='false' title='Bienvenidos' type='Text'>
<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>[+/-]
<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>

" 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"

<img src="url_de_la_imagen"/>

Ver ejemplo funcionando

fonte e créditos:

http://elescaparatederosa.blogspot.com/search/label/Gadget?updated-max=2010-01-17T14%3A59%3A00%2B01%3A00&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' <b:widget "Text1" title='Bienvenidos' type='Text'>
id = 'main' <> b: includable
<-! Mostrar apenas o título se for não-vazio ->
cond = 'data: <b:if título != ""'>
class => 'title' <h2 <data:title/> </ h2>
</ B: if>
class='widget-content'> <div
<data:content/>
</ Div>

name = 'QuickEdit' /> <b: includable
</ B: includable>
</ B: widget>

" 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 
(em negrito)"


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

Se nós substituir o símbolo Expandir / Recolher [+/-] por uma imagem, colocada diretamente em colocar o código para exibir a imagem:

<img src="url_de_la_imagen"/>

Veja exemplo de trabalho

























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