<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comentários sobre: Simple Tabs &#8211; Tabs com JavaScript</title>
	<atom:link href="http://www.pinceladasdaweb.com.br/blog/2009/01/07/simple-tabs-tabs-com-javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.pinceladasdaweb.com.br/blog/2009/01/07/simple-tabs-tabs-com-javascript/</link>
	<description>Tutoriais sobre: XHTML, CSS, JavaScript e WebStandards</description>
	<lastBuildDate>Sat, 13 Mar 2010 18:52:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>Por: Jo Nakashima</title>
		<link>http://www.pinceladasdaweb.com.br/blog/2009/01/07/simple-tabs-tabs-com-javascript/#comment-166278</link>
		<dc:creator>Jo Nakashima</dc:creator>
		<pubDate>Fri, 21 Aug 2009 22:16:04 +0000</pubDate>
		<guid isPermaLink="false">http://www.pinceladasdaweb.com.br/blog/?p=1633#comment-166278</guid>
		<description>Ótima dica! Exatamente o que eu estava procurando :)
Obrigado!</description>
		<content:encoded><![CDATA[<p>&Oacute;tima dica! Exatamente o que eu estava procurando <img src='http://www.pinceladasdaweb.com.br/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
Obrigado!</p>
]]></content:encoded>
	</item>
	<item>
		<title>Por: Flavio</title>
		<link>http://www.pinceladasdaweb.com.br/blog/2009/01/07/simple-tabs-tabs-com-javascript/#comment-161091</link>
		<dc:creator>Flavio</dc:creator>
		<pubDate>Sun, 19 Jul 2009 22:44:43 +0000</pubDate>
		<guid isPermaLink="false">http://www.pinceladasdaweb.com.br/blog/?p=1633#comment-161091</guid>
		<description>Havia um bug no script, onde quando se colocava alguma div dentro do conteúdo o script entendia esta div como o conteúdo de outra tab e não mostrava ao setar a current tab.

perdi um tempo pra entender e só depois ví que o script está na versão 1.3 e o bug estava resolvido rsss.

de qualquer forma, aos desavisados como eu :), baixem a versão mais atualizada.

Abraço,
Flavio
www.spyderit.com.br</description>
		<content:encoded><![CDATA[<p>Havia um bug no script, onde quando se colocava alguma div dentro do conte&uacute;do o script entendia esta div como o conte&uacute;do de outra tab e n&atilde;o mostrava ao setar a current tab.</p>
<p>perdi um tempo pra entender e s&oacute; depois v&iacute; que o script est&aacute; na vers&atilde;o 1.3 e o bug estava resolvido rsss.</p>
<p>de qualquer forma, aos desavisados como eu <img src='http://www.pinceladasdaweb.com.br/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> , baixem a vers&atilde;o mais atualizada.</p>
<p>Abra&ccedil;o,<br />
Flavio<br />
<a href="http://www.spyderit.com.br" rel="nofollow">http://www.spyderit.com.br</a></p>
]]></content:encoded>
	</item>
	<item>
		<title>Por: Renan</title>
		<link>http://www.pinceladasdaweb.com.br/blog/2009/01/07/simple-tabs-tabs-com-javascript/#comment-156890</link>
		<dc:creator>Renan</dc:creator>
		<pubDate>Sat, 27 Jun 2009 02:04:29 +0000</pubDate>
		<guid isPermaLink="false">http://www.pinceladasdaweb.com.br/blog/?p=1633#comment-156890</guid>
		<description>Aew pessoal, eu sou novo em javascript, JQuery e etc...tenho uma duvida, como faço pra deixar um tamanho fixo independente do conteudo escrito???

Abraço

Quem puder por favor me manda um e-mail</description>
		<content:encoded><![CDATA[<p>Aew pessoal, eu sou novo em javascript, JQuery e etc&#8230;tenho uma duvida, como fa&ccedil;o pra deixar um tamanho fixo independente do conteudo escrito???</p>
<p>Abra&ccedil;o</p>
<p>Quem puder por favor me manda um e-mail</p>
]]></content:encoded>
	</item>
	<item>
		<title>Por: Hikari</title>
		<link>http://www.pinceladasdaweb.com.br/blog/2009/01/07/simple-tabs-tabs-com-javascript/#comment-149730</link>
		<dc:creator>Hikari</dc:creator>
		<pubDate>Sun, 17 May 2009 16:23:23 +0000</pubDate>
		<guid isPermaLink="false">http://www.pinceladasdaweb.com.br/blog/?p=1633#comment-149730</guid>
		<description>Muito legal esse esquema de tabs, mas no q diz respeito a Usabilidade, será q os usuários são capazes de identificar as tabs e browsear pra ver todo o conteúdo? Se eles naum perceberem, acabamos escondendo conteúdo deles, aí é melhor nem usar...

Acho q isso vale a pena só pra forms mesmo, pra naum carregar a tela com  muitas opções e confundir/desanimar o usuário.</description>
		<content:encoded><![CDATA[<p>Muito legal esse esquema de tabs, mas no q diz respeito a Usabilidade, ser&aacute; q os usu&aacute;rios s&atilde;o capazes de identificar as tabs e browsear pra ver todo o conte&uacute;do? Se eles naum perceberem, acabamos escondendo conte&uacute;do deles, a&iacute; &eacute; melhor nem usar&#8230;</p>
<p>Acho q isso vale a pena s&oacute; pra forms mesmo, pra naum carregar a tela com  muitas op&ccedil;&otilde;es e confundir/desanimar o usu&aacute;rio.</p>
]]></content:encoded>
	</item>
	<item>
		<title>Por: Fernando Meyer</title>
		<link>http://www.pinceladasdaweb.com.br/blog/2009/01/07/simple-tabs-tabs-com-javascript/#comment-148618</link>
		<dc:creator>Fernando Meyer</dc:creator>
		<pubDate>Tue, 12 May 2009 14:26:54 +0000</pubDate>
		<guid isPermaLink="false">http://www.pinceladasdaweb.com.br/blog/?p=1633#comment-148618</guid>
		<description>Amigo, o seguinte erro por não estar aparecendo no IE7+ é por que no final do código javascript ele estava pedindo mais um parametro.
Veja que retirando a &quot;,&quot;(virgula) do final da chave, ele nao ira mais acusar erro no código e funcionara perfeitamente no IE7+.

Resumindo:
[ANTES]
	},

	// END
};


// Load SimpleTabs
simpleTabs.addLoadEvent(simpleTabs.init);

==============================================================

[CORRIGIDO]

	}

	// END
};


// Load SimpleTabs
simpleTabs.addLoadEvent(simpleTabs.init);

Fica ai o ajuste.
Abraços.
Contato: nandumeyer@hotmail.com
Fernando Meyer - Updown Web!</description>
		<content:encoded><![CDATA[<p>Amigo, o seguinte erro por n&atilde;o estar aparecendo no IE7+ &eacute; por que no final do c&oacute;digo javascript ele estava pedindo mais um parametro.<br />
Veja que retirando a &#8220;,&#8221;(virgula) do final da chave, ele nao ira mais acusar erro no c&oacute;digo e funcionara perfeitamente no IE7+.</p>
<p>Resumindo:<br />
[ANTES]<br />
	},</p>
<p>	// END<br />
};</p>
<p>// Load SimpleTabs<br />
simpleTabs.addLoadEvent(simpleTabs.init);</p>
<p>==============================================================</p>
<p>[CORRIGIDO]</p>
<p>	}</p>
<p>	// END<br />
};</p>
<p>// Load SimpleTabs<br />
simpleTabs.addLoadEvent(simpleTabs.init);</p>
<p>Fica ai o ajuste.<br />
Abra&ccedil;os.<br />
Contato: <a href="mailto:nandumeyer@hotmail.com">nandumeyer@hotmail.com</a><br />
Fernando Meyer &#8211; Updown Web!</p>
]]></content:encoded>
	</item>
	<item>
		<title>Por: Samuel Corradi</title>
		<link>http://www.pinceladasdaweb.com.br/blog/2009/01/07/simple-tabs-tabs-com-javascript/#comment-99902</link>
		<dc:creator>Samuel Corradi</dc:creator>
		<pubDate>Sat, 10 Jan 2009 11:11:47 +0000</pubDate>
		<guid isPermaLink="false">http://www.pinceladasdaweb.com.br/blog/?p=1633#comment-99902</guid>
		<description>O problema desses scripts é colocar os títulos fora da sequencia do conteúdo. Eles vêm primeiro, depois vem o texto. Deveriam vir em sequencia...

Fiz um script em Jquery que cria abas em formulários. Assim dá para dividi-los em etapa. Nesse caso, usei o fieldset e legend para formar as abas. Se o Js estiver desabilitado, aparecerá os fieldsets bonitinhos. Se estive habilitado, aparecerá as abas.

O único problema é que ele não funciona com mais de 1 form na página. Se tiver mais de 1 form, vc tem que invocar 2 vezes. $(&#039;form&#039;).fieldTabs(); não funciona com mais de 1 form. $(&#039;#form1&#039;).fieldTabs(); é a solução nesse caso.

Se alguém souber como resolver isso... :)

Ai vai o código:

(function($) {
$.fn.fieldForms = function(options) {
	var opts = $.extend({}, $.fn.fieldForms.defaults, options);
	return this.each(function(x) {
		$this = $(this);
		var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
		// 1. funcao para pegar o escrito de cada tag &#039;legend&#039; e separar todos em array
		$legendas = [];
		$(this).find(&#039;fieldset legend&#039;).each(function(i) { $legendas[i] = $(this).text(); $(this).hide(); });
		if ($legendas.length&gt;0) {
			montaAbas($legendas);
			ativaAbas(o.abaAtiva);
		}
		// 2. recebe o array com os textos das tags &#039;legend(s)&#039; e cria as abas para a navegacao
		function montaAbas($legendas) {
			var $html = &#039;&#039;;
			for (var $x=0; $x&lt;$legendas.length; $x++) {
				$html += &#039;&#039;+$legendas[$x]+&#039; - &#039;;
			}
			$this.find(&#039;fieldset&#039;).eq(0).before(&#039;&#039;+ $html +&#039;&#039;);
			$this.find(&#039;.aba&#039;).each(function(i) {
				$(this).click( function() { ativaAbas(i); } );
			});
		}
		// 3. funcao invocada quando se clica na aba reponsavel por fazer a navegacao entre &#039;fieldset(s)&#039;
		function ativaAbas($indice) {
			ocultaCampos();
			$this.find(&#039;fieldset&#039;).eq($indice).show();
		}
		// 4. funcao para ocultar todos &#039;fieldset(s)&#039;
		function ocultaCampos() {
			$this.find(&#039;fieldset&#039;).hide();
		}
	});
};
$.fn.fieldForms.defaults = { abaAtiva: 0 };
})(jQuery);</description>
		<content:encoded><![CDATA[<p>O problema desses scripts &eacute; colocar os t&iacute;tulos fora da sequencia do conte&uacute;do. Eles v&ecirc;m primeiro, depois vem o texto. Deveriam vir em sequencia&#8230;</p>
<p>Fiz um script em Jquery que cria abas em formul&aacute;rios. Assim d&aacute; para dividi-los em etapa. Nesse caso, usei o fieldset e legend para formar as abas. Se o Js estiver desabilitado, aparecer&aacute; os fieldsets bonitinhos. Se estive habilitado, aparecer&aacute; as abas.</p>
<p>O &uacute;nico problema &eacute; que ele n&atilde;o funciona com mais de 1 form na p&aacute;gina. Se tiver mais de 1 form, vc tem que invocar 2 vezes. $(&#8216;form&#8217;).fieldTabs(); n&atilde;o funciona com mais de 1 form. $(&#8216;#form1&#8242;).fieldTabs(); &eacute; a solu&ccedil;&atilde;o nesse caso.</p>
<p>Se algu&eacute;m souber como resolver isso&#8230; <img src='http://www.pinceladasdaweb.com.br/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Ai vai o c&oacute;digo:</p>
<p>(function($) {<br />
$.fn.fieldForms = function(options) {<br />
	var opts = $.extend({}, $.fn.fieldForms.defaults, options);<br />
	return this.each(function(x) {<br />
		$this = $(this);<br />
		var o = $.meta ? $.extend({}, opts, $this.data()) : opts;<br />
		// 1. funcao para pegar o escrito de cada tag &#8216;legend&#8217; e separar todos em array<br />
		$legendas = [];<br />
		$(this).find(&#8216;fieldset legend&#8217;).each(function(i) { $legendas[i] = $(this).text(); $(this).hide(); });<br />
		if ($legendas.length&gt;0) {<br />
			montaAbas($legendas);<br />
			ativaAbas(o.abaAtiva);<br />
		}<br />
		// 2. recebe o array com os textos das tags &#8216;legend(s)&#8217; e cria as abas para a navegacao<br />
		function montaAbas($legendas) {<br />
			var $html = &#8221;;<br />
			for (var $x=0; $x&lt;$legendas.length; $x++) {<br />
				$html += &#8221;+$legendas[$x]+&#8217; &#8211; &#8216;;<br />
			}<br />
			$this.find(&#8216;fieldset&#8217;).eq(0).before(&#8221;+ $html +&#8221;);<br />
			$this.find(&#8216;.aba&#8217;).each(function(i) {<br />
				$(this).click( function() { ativaAbas(i); } );<br />
			});<br />
		}<br />
		// 3. funcao invocada quando se clica na aba reponsavel por fazer a navegacao entre &#8216;fieldset(s)&#8217;<br />
		function ativaAbas($indice) {<br />
			ocultaCampos();<br />
			$this.find(&#8216;fieldset&#8217;).eq($indice).show();<br />
		}<br />
		// 4. funcao para ocultar todos &#8216;fieldset(s)&#8217;<br />
		function ocultaCampos() {<br />
			$this.find(&#8216;fieldset&#8217;).hide();<br />
		}<br />
	});<br />
};<br />
$.fn.fieldForms.defaults = { abaAtiva: 0 };<br />
})(jQuery);</p>
]]></content:encoded>
	</item>
	<item>
		<title>Por: Pedro Rogério</title>
		<link>http://www.pinceladasdaweb.com.br/blog/2009/01/07/simple-tabs-tabs-com-javascript/#comment-98967</link>
		<dc:creator>Pedro Rogério</dc:creator>
		<pubDate>Thu, 08 Jan 2009 11:40:26 +0000</pubDate>
		<guid isPermaLink="false">http://www.pinceladasdaweb.com.br/blog/?p=1633#comment-98967</guid>
		<description>@Vinícius,

Acabei de descobrir isso agora, não funciona no IE.</description>
		<content:encoded><![CDATA[<p>@Vin&iacute;cius,</p>
<p>Acabei de descobrir isso agora, n&atilde;o funciona no IE.</p>
]]></content:encoded>
	</item>
	<item>
		<title>Por: Vinícius Siller</title>
		<link>http://www.pinceladasdaweb.com.br/blog/2009/01/07/simple-tabs-tabs-com-javascript/#comment-98964</link>
		<dc:creator>Vinícius Siller</dc:creator>
		<pubDate>Thu, 08 Jan 2009 11:34:45 +0000</pubDate>
		<guid isPermaLink="false">http://www.pinceladasdaweb.com.br/blog/?p=1633#comment-98964</guid>
		<description>É impressão minha ou não roda no iE7+?</description>
		<content:encoded><![CDATA[<p>&Eacute; impress&atilde;o minha ou n&atilde;o roda no iE7+?</p>
]]></content:encoded>
	</item>
</channel>
</rss>
