tag:blogger.com,1999:blog-39718757427770018272024-03-21T11:10:01.419-03:00Folder CodeGuilhermehttp://www.blogger.com/profile/16626756441702988734noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-3971875742777001827.post-79339994637315392502010-06-17T10:17:00.003-03:002010-09-21T11:21:39.957-03:00Como criar abas em páginas web<div style="text-align: justify;">Hoje mostrarei uma forma extremamente fácil e rápida de criar uma navegação por abas em páginas web.<br />
<br />
<a href="http://foldercode.webcindario.com/demos/Tabs-JQuery/index.html" target="_blank">Veja aqui</a> como vai ficar o exemplo do tutorial finalizado (caso as abas não apareçam, é algum problema com esse servidor gratuito que eu arranjei, rs).<br />
<br />
Printscreen das abas:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYTHLgBMHB58gZNEGAWojFd-PweExkt4yIQ0B_7iq72rF6tXxZwNnKtNbojKOTdIrwEVirKeScbncpvlg61XsK0YWbus4qM2Y1Ow2KXqf-Hct_p_pIMM8-X_pMFlGty8MCAjtozfBMNEI/s1600/abas.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYTHLgBMHB58gZNEGAWojFd-PweExkt4yIQ0B_7iq72rF6tXxZwNnKtNbojKOTdIrwEVirKeScbncpvlg61XsK0YWbus4qM2Y1Ow2KXqf-Hct_p_pIMM8-X_pMFlGty8MCAjtozfBMNEI/s320/abas.jpg" /></a></div><br />
Utilizaremos neste tutorial jQuery UI. O jQuery UI fornece abstrações de baixo nível de interação e animação, efeitos avançados de alto nível, widgets personalizáveis, construídos em cima da jQuery JavaScript Library, que você pode usar para construir aplicações web altamente interativas (<a href="http://jqueryui.com/" target="_blank">jQuery UI</a>).<br />
<br />
Para realizar este tutorial precisaremos da lib jQuery versão 1.4.2, jQuery UI versão 1.8.2 e do css da jQuery UI para montar as abas. <br />
<br />
Todos estes arquivos e o projeto realizado neste tutorial, você pode <a href="http://www.4shared.com/file/WL9lAHfs/Tabs-JQuery.html" target="_blank">baixar aqui</a>.<br />
<br />
Caso prefira fazer os passos do tutorial, baixe o arquivo do projeto e separe em um diretório os arquivos:<br />
<br />
<ul><li>jquery-1.4.2.min.js</li>
<li>jquery-ui-1.8.2.custom.min.js</li>
<li>css/smoothness/*</li>
</ul><a name='more'></a><br />
<i>Nota 1: Os arquivos .js podem ser baixados no site da jQuery UI, e a pasta "smoothness" é o tema css utilizado para criar as abas, que também pode ser baixado no site.<br />
<br />
Nota 2: Note que o arquivo jquery-ui-1.8.2.custom.min.js é a lib da jquery ui customizada para funcionar somente com as abas.</i><br />
<br />
Primeiramente criaremos um arquivo css. Neste arquivo colocaremos alguns comandos apenas para formatar a aba de forma mais "bonita" na tela. A criação deste arquivo é opcional.<br />
<br />
<b>main.css</b><br />
<pre class="brush: css">body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}</pre>Em seguida, criaremos um arquivo js para colocar o código jQuery responsável por criar as abas.<br />
<br />
<b>tabs.js</b><br />
<pre class="brush: jscript">$(function(){
// Habilita o modo de abas
$('#tabs').tabs();
//Não deixa selecionada a aba quando o usuário clica. (Comente esta parte e veja a diferença)
$('a').click(function() {
$(this).blur();
});
});</pre>Agora criaremos o arquivo html.<br />
<br />
<b>index.html</b><br />
<pre class="brush: html"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Abas - Folder Code</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<link type="text/css" href="css/main.css" rel="stylesheet" />
<script type="text/javascript" src="js/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Aba 1</a></li>
<li><a href="#tabs-2">Aba 2</a></li>
<li><a href="#tabs-3">Aba 3</a></li>
</ul>
<div id="tabs-1">Oi, esta é a aba número 1.</div>
<div id="tabs-2">Sim, agora estamos na segunda aba!</div>
<div id="tabs-3">E essa a 3ª aba. :)</div>
</div>
</body>
</html></pre>Observe atentamente a chamada dos arquivos css e js dentro do <head> do código. Primeiro é feita a chamada do arquivo css do jquery ui, em seguida do arquivo css que criamos, depois a lib do jquery seguida da lib do jquery ui, e por fim, o arquivo js que criará as abas (que também criamos). <b>Siga a risca essa ordem</b>.<br />
<br />
As abas são criadas com os divs, como você pode observar dentro do <body> do código.<br />
<br />
:-)<br />
<br />
@update_21/09/2010: Adicionado o printscreen das abas e o link para visualizar as abas funcionando.<br />
</div><br />
<div style="height: 120px; overflow: hidden; width: 468px;"><div style="overflow: hidden;"><script language="javascript" src="http://ivitrine.buscape.com/bpadsvar.js">
</script> <script language="javascript">
buscapeads_afiliado = "44554278";
buscapeads_tipo_cliente = "2";
buscapeads_vitrine_local = "BR";
buscapeads_site_origem = "10749016";
buscapeads_vitrine_vers = "1.23";
buscapeads_formato = "468x60";
buscapeads_id_keyword = "264909";
buscapeads_txt_keyword = "";
buscapeads_tipo_canal = "2";
buscapeads_categorias = "6424";
buscapeads_excluir = "3";
buscapeads_idioma = "pt";
buscapeads_pais = "BR";
buscapeads_area = "";
buscapeads_estado = "";
buscapeads_cidade = "";
buscapeads_cep = "12328220";
</script> <script language="javascript" src="http://ivitrine.buscape.com/bpads.js">
</script></div></div>Guilhermehttp://www.blogger.com/profile/16626756441702988734noreply@blogger.com11tag:blogger.com,1999:blog-3971875742777001827.post-24373297417415339702010-02-05T09:48:00.009-02:002010-05-24T14:13:03.506-03:00Como desabilitar <option> de um <select> no Internet Explorer 6<div style="text-align: justify;">Quem trabalha com desenvolvimento web sabe a dificuldade que é criar páginas que sejam visualizadas corretamente na maioria dos navegadores.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Dentre os navegadores utilizados hoje, sem dúvida, o mais "temido" de todos é o nosso querido Internet Explorer (em especial versão 6). É incrível como praticamente tudo dá bug nele! (E quem é desenvolvedor sabe do que estuo falando!)<br />
<br />
Um dos problemas do qual vi alguns programadores penando para resolver foi deixar desabilitado a tag <option> de um combobox (<select>) no IE6.<br />
<br />
<div style="text-align: justify;">Com algumas pesquisas na internet achei esta solução em um site americano, que utiliza jQuery, e foi a maneira mais fácil de resolver o problema que encontrei (e também a que utilizou menos código para isso!).</div><br />
<a name='more'></a><br />
<br />
Caso ainda não seja familiarizado com jQuery, sugiro uma leitura rápida deste artigo antes de prosseguirmos: <a href="http://www.foldercode.com/2009/12/iniciando-em-jquery.html" target="_blank">Iniciando em jQuery - Validando uma caixa de texto</a><br />
<br />
Feito isso, vamos a mão na massa!<br />
Primeiramente crie o seu combobox com algumas opções, como no exemplo abaixo:<br />
<pre class="brush: xml"><select name="sel" id="sel">
<option id="1" value="1">1</option>
<option id="1" value="2">2</option>
<option id="3" value="3">3</option>
<option id="4" value="4">4</option>
</select></pre><div style="text-align: justify;">Em seguida importe a lib do jQuery (lembre-se de coloca-la entre as tags <head></head>: </div><pre class="brush: xml"><script src="jquery/jquery-1.3.2.js" type="text/javascript" ></script></pre><div style="text-align: justify;">Abaixo do importe da lib, coloque este código (ou crie um arquivo .js separado e importe também):</div></div><pre class="brush: jscript"><script type="text/javascript">
$(document).ready(function()
{
$.fn.extend(
{
optionDisable:function()
{
var ths = $(this);
if(ths.attr('tagName').toLowerCase() == 'option')
{
ths.before($('<optgroup>&nbsp;</optgroup>').css({color:'#ccc', height:ths.height()}).attr({id:ths.attr('value'), label:ths.text()})).remove();
}
return ths;
},
optionEnable:function()
{
var ths = $(this);
var tag = ths.attr('tagName').toLowerCase();
if(tag == 'option')
{
ths.removeAttr('disabled');
}
else if(tag == 'optgroup')
{
ths.before($('<option />').attr({value:ths.attr('id')}).text(ths.attr('label'))).remove();
}
return ths;
}
});
});
</script></pre><div style="text-align: justify;">O trecho de código acima é o chamado plugin de jQuery. Esses plugins trabalham como se fossem uma classe ou função, ou seja, um programador escreve um código que realiza alguma coisa e disponibiliza para outros programadores.</div><br />
<div style="text-align: justify;">Basicamente este plugin troca o option escolhido por um <optgroup> e utiliza css para mudar a cor dele para cinza, dando a impressão de estar desabilitado a opção.</div><br />
<div style="text-align: justify;">Mas e agora, como eu escolho qual <option> quero desabilitar?</div><div style="text-align: justify;">A resposta é muito simples e realizada com apenas uma linha de código, veja:</div><pre class="brush: jscript">$('#sel').children(':eq(1)').optionDisable();</pre><div style="text-align: justify;">A linha de código acima diz para deixar desabilitado a opção número 1 (eq(1)) do combobox de ID sel (#sel). </div><div style="text-align: justify;"><i><b>Nota:</b> a contagem do número de opções começa em 0, portanto, desabilitando a opção 1 neste exemplo dado, estaria desabilitando a opção cujo valor é igual a 2.</i></div><br />
Créditos do código jQuery: <a href="http://harrybailey.com/2008/11/disabling-select-options-in-internet-explorer/" target="_blank">http://harrybailey.com/2008/11/disabling-select-options-in-internet-explorer/</a><br />
<br />
Segue o link do exemplo criado para download: <a href="http://www.4shared.com/file/215567168/7f98be86/teste.html" target="_blank">Clique aqui</a><br />
<br />
Até a próxima!<br />
:-) <br />
<br />
<div style="height: 120px; overflow: hidden; width: 468px;"><div style="overflow: hidden;"><script language="javascript" src="http://ivitrine.buscape.com/bpadsvar.js">
</script><br />
<script language="javascript">
<!--
buscapeads_afiliado = "44554278";
buscapeads_tipo_cliente = "2";
buscapeads_vitrine_local = "BR";
buscapeads_site_origem = "9878754";
buscapeads_vitrine_vers = "1.23";
buscapeads_formato = "468x60";
buscapeads_id_keyword = "236342";
buscapeads_txt_keyword = "";
buscapeads_tipo_canal = "41";
buscapeads_categorias = "2922,2376,6973,3482,2918,103";
buscapeads_excluir = "3";
buscapeads_idioma = "pt";
buscapeads_pais = "BR";
buscapeads_area = "";
buscapeads_estado = "";
buscapeads_cidade = "";
buscapeads_cep = "12328220";
//-->
</script><br />
<script language="javascript" src="http://ivitrine.buscape.com/bpads.js">
</script></div><br />
<a href="http://www.lomadee.com/"><span style="font-size: xx-small;"></span></a><br />
<div align="right"><a href="http://www.lomadee.com/"><span style="font-size: xx-small;"><br />
</span></a><br />
<a href="http://www.lomadee.com/"><span style="font-size: xx-small;">Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina</span></a></div><a href="http://www.lomadee.com/"><span style="font-size: xx-small;"></span></a></div>Guilhermehttp://www.blogger.com/profile/16626756441702988734noreply@blogger.com3tag:blogger.com,1999:blog-3971875742777001827.post-8377478821979479962009-12-15T16:54:00.002-02:002009-12-15T16:59:48.061-02:00Iniciando em jQuery - Validando uma caixa de textoOlá pessoal,<br />
<br />
Hoje vou falar um pouco sobre jQuery.<br />
A jQuery é uma biblioteca de JavaScript que trabalha com Ajax e DOM (modelo de objeto de documento). O legal dessa lib é que você consegue resultados muito mais rápidos e legais, escrevendo muito menos que no tradicional JavaScript.<br />
<br />
Para poder utilizar jQuery em seus sites, você precisa primeiramente baixa-la: <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js">http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js</a><br />
<br />
Em seguida, faça a linkagem da biblioteca na sua página, colocando a seguinte linha dentro das tags <head></head>.<br />
<pre class="brush: xml"><script src="CAMINHO/jquery-1.3.2.js" type="text/javascript">
</script>
</pre>Troque a palavra CAMINHO pelo caminho correto no seu site até a biblioteca.<br />
<br />
Com a biblioteca carregada, já podemos começar a programar usando jQuery. Abaixo, deixo um pequeno exemplo de validação de uma caixa de texto do tipo <input type="text" id="texto" />. Quando o usuário clicar no botão "Click", o JavaScript será ativado e um alerta aparecerá ao usuário informando se a caixa de texto está vazia ou não.<br />
<br />
Nota: para a jQuery, o que interessa é o <b>id</b> dos componentes e não o name.<br />
<pre class="brush: xml"><body>
<input type="text" id="texto">
<input type="button" id="button" value="Click" />
</body>
</pre>Com os dois componentes no nosso documento HTML, vamos colocar agora o código jQuery que fará o serviço de validação.<br />
Primeiramente, vamos abrir as tags <script></script> e inserir o seguinte código dentro:<br />
<pre class="brush: jscript"><script>
$(document).ready(function(){
//Quando o documento estiver pronto, execute o que estiver aqui dentro
});
</script>
</pre>Feito isso, vamos atribuir o ID da nossa caixa de texto a uma variável (isto é opcional, caso queira, pode referenciar o ID diretamente).<br />
<pre class="brush: jscript">//Os IDs em jQuery são representados por $("#nome_do_ID")
var texto = $("#texto");
</pre>A seguir, vamos acrescentar a função do botão. Esta função é processada quando ocorre o evento <i>click</i> no botão.<br />
<pre class="brush: jscript">$("#button").click(function(){
});
</pre>Tudo o que estiver entre as chaves, será executado quando o botão for clicado, então, iremos colocar agora a condição para verificar se a caixa de texto está em branco.<br />
<pre class="brush: jscript">//val() retorna o valor. Neste caso, o valor do componente texto
if(texto.val() == "") {
alert("A caixa de texto está vazia.");
} else {
alert("Caixa de texto: " + texto.val());
} </pre>E este é o código final do jQuery que criamos nas etapas acima:<br />
<pre class="brush: jscript"><script>
$(document).ready(function(){
var texto = $("#texto");
$("#button").click(function(){
//val() retorna o valor. Neste caso, o valor do componente texto
if(texto.val() == "") {
alert("A caixa de texto está vazia.");
} else {
alert("Caixa de texto: " + texto.val());
}
});
});
</script> </pre>Até a próxima :-)<br />
<br />
<div style="height: 120px; overflow: hidden; width: 468px;"><div style="overflow: hidden;"><script language="javascript" src="http://ivitrine.buscape.com/bpadsvar.js">
</script><br />
<script language="javascript">
<!--
buscapeads_afiliado = "44554278";
buscapeads_tipo_cliente = "2";
buscapeads_vitrine_local = "BR";
buscapeads_site_origem = "9877549";
buscapeads_vitrine_vers = "1.23";
buscapeads_formato = "468x60";
buscapeads_id_keyword = "235701";
buscapeads_txt_keyword = "";
buscapeads_tipo_canal = "41";
buscapeads_categorias = "9634,6946,6391,6398,7074,103";
buscapeads_excluir = "3";
buscapeads_idioma = "pt";
buscapeads_pais = "BR";
buscapeads_area = "";
buscapeads_estado = "";
buscapeads_cidade = "";
buscapeads_cep = "12328220";
//-->
</script><br />
<script language="javascript" src="http://ivitrine.buscape.com/bpads.js">
</script><br />
</div></div>Guilhermehttp://www.blogger.com/profile/16626756441702988734noreply@blogger.com0