<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	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/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>JavaScript: Singuska &#187; ux</title>
	<atom:link href="http://javascript.singuska.com/tag/ux/feed/" rel="self" type="application/rss+xml" />
	<link>http://javascript.singuska.com</link>
	<description>Fragmentos de código e gambiarras (0.2)</description>
	<lastBuildDate>Mon, 03 Oct 2011 19:45:27 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2</generator>
		<item>
		<title>target=&#8221;_blank&#8221; com doctype Strict</title>
		<link>http://javascript.singuska.com/2010/01/17/target_blank-com-doctype-strict/</link>
		<comments>http://javascript.singuska.com/2010/01/17/target_blank-com-doctype-strict/#comments</comments>
		<pubDate>Sun, 17 Jan 2010 15:01:21 +0000</pubDate>
		<dc:creator>Flávio</dc:creator>
				<category><![CDATA[Fragmento]]></category>
		<category><![CDATA[Gambiarra]]></category>
		<category><![CDATA[dom]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[ux]]></category>

		<guid isPermaLink="false">http://javascript.singuska.com/?p=299</guid>
		<description><![CDATA[Se você é fresco como eu ou como a Dani Murai e gosta de codificar suas páginas utilizando doctype strict já sabe que target=&#8221;_blank&#8221; não valida. Particularmente eu sou contra _blank. É consenso entre os gurus de UX deixar a critério do usuário abrir ou não um link em uma nova guia. Mas como muitos [...]]]></description>
			<content:encoded><![CDATA[<p>Se você é fresco como eu ou como a <a href="http://twitter.com/NiaDany">Dani Murai</a> e gosta de codificar suas páginas utilizando <em>doctype strict</em> já sabe que <em>target=&#8221;_blank&#8221;</em> não valida. Particularmente eu sou contra _blank. É consenso entre os gurus de <a href="http://en.wikipedia.org/wiki/User_experience_design">UX</a> deixar a critério do usuário abrir ou não um link em uma nova guia. Mas como muitos clientes não entendem as implicações de forçar este tipo de prática guela abaixo do usuáro, e você é fresco e continua querendo usar strict, a solução é JavaScript:</p>
<p><span class="jsrun-exemplo-1 jsrun-button"></span></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #ffffff;">&#40;</span><span style="color: #61ce3c;">'a'</span><span style="color: #ffffff;">&#41;</span>.<span style="color: #6591f7;">click</span><span style="color: #ffffff;">&#40;</span><span style="color: #fbde2d; font-weight: bold;">function</span><span style="color: #ffffff;">&#40;</span><span style="color: #ffffff;">&#41;</span><span style="color: #ffffff;">&#123;</span>
    <span style="color: #fbde2d; font-weight: bold;">var</span> href <span style="color: #ffffff;">=</span> $<span style="color: #ffffff;">&#40;</span><span style="color: #fbde2d; font-weight: bold;">this</span><span style="color: #ffffff;">&#41;</span>.<span style="color: #6591f7;">attr</span><span style="color: #ffffff;">&#40;</span><span style="color: #61ce3c;">'href'</span><span style="color: #ffffff;">&#41;</span><span style="color: #ffffff;">;</span>
    window.<span style="color: red;">open</span><span style="color: #ffffff;">&#40;</span>href<span style="color: #ffffff;">&#41;</span><span style="color: #ffffff;">;</span>
    <span style="color: #fbde2d; font-weight: bold;">return</span> <span style="color: #fbde2d; font-weight: bold;">false</span><span style="color: #ffffff;">;</span>
<span style="color: #ffffff;">&#125;</span><span style="color: #ffffff;">&#41;</span><span style="color: #ffffff;">;</span></pre></td></tr></table></div>

<p>Este exemplo em jQuery, se executado, fará com que todos os links desta página sejam abertos em uma nova guia. O <em>return false</em> na linha 4 serve para barrar o evento padrão do link. Se o return for omitido, o destino do link vai ser aberto em uma nova guia <em>e também</em> na página atual.</p>
<h3>preventDefault: uma alternativa mais elegante</h3>
<p>Descobri recentemente o método <em>preventDefault</em> que acaba sendo muito mais prático e menos sujo do que o <em>return false</em>:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #ffffff;">&#40;</span><span style="color: #61ce3c;">'a'</span><span style="color: #ffffff;">&#41;</span>.<span style="color: #6591f7;">click</span><span style="color: #ffffff;">&#40;</span><span style="color: #fbde2d; font-weight: bold;">function</span><span style="color: #ffffff;">&#40;</span>event<span style="color: #ffffff;">&#41;</span><span style="color: #ffffff;">&#123;</span>
    event.<span style="color: #6591f7;">preventDefault</span><span style="color: #ffffff;">&#40;</span><span style="color: #ffffff;">&#41;</span><span style="color: #ffffff;">;</span>
    <span style="color: #fbde2d; font-weight: bold;">var</span> href <span style="color: #ffffff;">=</span> $<span style="color: #ffffff;">&#40;</span><span style="color: #fbde2d; font-weight: bold;">this</span><span style="color: #ffffff;">&#41;</span>.<span style="color: #6591f7;">attr</span><span style="color: #ffffff;">&#40;</span><span style="color: #61ce3c;">'href'</span><span style="color: #ffffff;">&#41;</span><span style="color: #ffffff;">;</span>
    window.<span style="color: red;">open</span><span style="color: #ffffff;">&#40;</span>href<span style="color: #ffffff;">&#41;</span><span style="color: #ffffff;">;</span>
<span style="color: #ffffff;">&#125;</span><span style="color: #ffffff;">&#41;</span><span style="color: #ffffff;">;</span></pre></td></tr></table></div>

<p>Além de fazer muito mais sentido do que o return, <em>preventDefault</em> pode ser colocado em qualquer parte do evento, não interrompendo o fluxo da função.</p>
]]></content:encoded>
			<wfw:commentRss>http://javascript.singuska.com/2010/01/17/target_blank-com-doctype-strict/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

