FlavioMuniz » Blog
Simples assim
Combobox de Estados e Cidades com jQuery
Jul 29th
Olá,
Eu sei que todo mundo ja teve uma vez, algum problema com combobox de estados e cidades brasileiras,
utilizamos varias técnicas com ajax para fazer isso, mas hoje, vou mostra uma maneira muito mais simples
e muito mais rapida, utilizando a jQuery.
Primeiramente, não precisa ser nenhum expert em jQuery para fazer isso, basta conhecer as funções
e saber para que elas server, e com isso, só botar a criatividade em prática.
More >
Marcar e Desmarcar checkbox com a jQuery.
Apr 15th
Olá, hoje vou mostrar uma forma simples de se trabalhar com checkbox com a jquery. Lembrando de sempre prestar atenção nos códigos que não tem erro.
Vamos lá, como sempre, vou postar o código e explicar em comentários o que cada linha faz, acho essa técnica muito mais eficaz.
Primeiramente vamos ao nosso html.
<!--
Esse id checkCheckbox é o "pai" dos id`s, então quando ele foi clicado
vai executar a ação do js que iremos criar.
-->
<input type="checkbox" id="checkCheckbox"/>
<br />
<ul>
<!--
as classes checkboxes são as filhas do id checkCheckbox, então
quando o checkCheckbox foi clicado, vão marcar ou desmarcar
os checkboxes que tenham a class checkboxes.
-->
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
</ul>
Esse id checkCheckbox é o "pai" dos id`s, então quando ele foi clicado
vai executar a ação do js que iremos criar.
-->
<input type="checkbox" id="checkCheckbox"/>
<br />
<ul>
<!--
as classes checkboxes são as filhas do id checkCheckbox, então
quando o checkCheckbox foi clicado, vão marcar ou desmarcar
os checkboxes que tenham a class checkboxes.
-->
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
<li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>
</ul>
Depois de termos definido as classes e os id`s, vamos criar a nossa jquery.
$(document).ready(function(){
$("#checkCheckbox").click(function()
{
//Verifica se esta checado ou não.
var check_uncheck = this.checked;
//Essa função each serve pra fazer iterações entre arrays.
$(".checkboxes").each(function()
{
//Check/Uncheck, cada clique no #checkCheckbox define o status, se é check ou uncheck
this.checked = check_uncheck;
});
});
});
$("#checkCheckbox").click(function()
{
//Verifica se esta checado ou não.
var check_uncheck = this.checked;
//Essa função each serve pra fazer iterações entre arrays.
$(".checkboxes").each(function()
{
//Check/Uncheck, cada clique no #checkCheckbox define o status, se é check ou uncheck
this.checked = check_uncheck;
});
});
});
Bem simples não?
Veja um exemplo do código em funcionamento, aqui.
Cookie com jQuery
Mar 18th
Olá, hoje vou mostrar como é simples trabalhar com cookie usando a jQuery.
Primeiro, vamos baixar o framework ja na nova versão 1.4 e o jquery.cookie.
Pronto, ja tendo os plugins, vamos por a mão na massa.
Abaixo no código, as linhas do js estão comentadas de acordo com a sua ação,
não tem segredo, não é copiar e colar, prestar atenção nos comentários e alem de tudo, entender.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://stilbuero.de/jquery/cookie/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Usamos a função find para buscar o "a" dentro da div "link" na ação do click
$("#link").find("a").click(function(){
//Declaramos que idBg vai ter o mesmo valor do ID do link clicado
var idBg = $(this).attr("id");
//Setamos o cookie com o nome de bg_fundo e passamos o valor do idBg, expirando em 7 dias.
$.cookie("bg_fundo", "" + idBg + "", { expires: 7 });
//Adicionamos uma classe ao body ou alguma div que você queira, passando o nome
//do cookie que no nosso caso é o bg_fundo.
$("body").addClass($.cookie("bg_fundo"));
});
//Ao abrir a página ou recarregar, ele traz o cookie adicionando a classe bg_fundo.
$("body").addClass($.cookie("bg_fundo"));
});
</script>
<style type="text/css" media="screen">
/*Definimos a cor do bg em cada classe.*/
.bg1 {background:#000000;}
.bg2 {background:#00ff00;}
.bg3 {background:#ff0000;}
</style>
</head>
<body>
<div id="link">
<ul>
<li><a href="javascript:void(0);" id="bg1">Background preto</a></li>
<li><a href="javascript:void(0);" id="bg2">Background verde</a></li>
<li><a href="javascript:void(0);" id="bg3">Background vermelho</a></li>
</ul>
</div>
</body>
<html>
<script type="text/javascript" src="http://stilbuero.de/jquery/cookie/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Usamos a função find para buscar o "a" dentro da div "link" na ação do click
$("#link").find("a").click(function(){
//Declaramos que idBg vai ter o mesmo valor do ID do link clicado
var idBg = $(this).attr("id");
//Setamos o cookie com o nome de bg_fundo e passamos o valor do idBg, expirando em 7 dias.
$.cookie("bg_fundo", "" + idBg + "", { expires: 7 });
//Adicionamos uma classe ao body ou alguma div que você queira, passando o nome
//do cookie que no nosso caso é o bg_fundo.
$("body").addClass($.cookie("bg_fundo"));
});
//Ao abrir a página ou recarregar, ele traz o cookie adicionando a classe bg_fundo.
$("body").addClass($.cookie("bg_fundo"));
});
</script>
<style type="text/css" media="screen">
/*Definimos a cor do bg em cada classe.*/
.bg1 {background:#000000;}
.bg2 {background:#00ff00;}
.bg3 {background:#ff0000;}
</style>
</head>
<body>
<div id="link">
<ul>
<li><a href="javascript:void(0);" id="bg1">Background preto</a></li>
<li><a href="javascript:void(0);" id="bg2">Background verde</a></li>
<li><a href="javascript:void(0);" id="bg3">Background vermelho</a></li>
</ul>
</div>
</body>
<html>
Qualquer coisa, postem que eu tiro dúvidas.
Até a próxima.
Alternativa para o uso do siFR com o cakephp
Feb 6th
Olá,
Recentemente em alguns projetos, a nossa equipe precisou usar fontes que não são de sistemas em titulos e textos espalhados pelo site, tentamos usar o siFR mas não deu muito certo, pois a gente precisava trocar algumas labels com ajax e não funcionaria ja que ele cria o embed da font assim que o site é carregado.
Então, devido a esse grande problemas que encontramos pela frente, resolvi utilizar um helper do cakephp para transformar aquele texto em imagens de 4k cada.
Depois da ideia ter sido aprovada, então começei a criar, vamos la.
More >
15 plugins da jquery que não podem faltar no seu projeto.
Dec 18th
Lightbox;
http://leandrovieira.com/projects/jquery/lightbox/
Accordion;
http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
Form Validate;
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Pagination;
http://plugins.jquery.com/project/pagination
DataTables
http://www.datatables.net/examples/example_zero_config.html
Jquery Flash
http://jquery.lukelutman.com/plugins/flash/
jCarrousel
http://sorgalla.com/jcarousel/
Stylish Select Box
http://www.scottdarby.com/2009/05/jquery-plugin-stylish-select-unobstrusive-select-box-replacement/
Feature List
http://jqueryglobe.com/article/feature-list
Masked Input
http://digitalbush.com/projects/masked-input-plugin/
Password Strength Meter
http://mypocket-technologies.com/jquery/password_strength/
Custom Check Box and Radio Buttons
http://mypocket-technologies.com/jquery/cust_radio_buttons/
AutoComplete
http://dyve.net/jquery/?autocomplete
DatePicker
http://www.jqueryui.com/demos/datepicker/
File Upload
http://www.fyneworks.com/jquery/multiple-file-upload/
Ta ai, alguns plugins que não podem faltar nos nossos projetos.
Até a próxima.
[ad] Empty ad slot (#2)!
Helper para data em pt_BR
Nov 5th
Alguns programadores criam funções gigantes para deixar o formato da data em português não é errado, mas esquecem de funções default do php para fazer isso.
Vou mostrar agora uma maneira simpeles de se fazer isso, transformando a data de November, 05, 2009 para 05 de Novembro de 2009.
Vamos primeiro criar nosso helper.
More >
Removendo caracteres especiais com php
Oct 22nd
Ola, hoje vou mostrar como é simples remover caracteres especiais com uma função default do php.
É muito facil achar na internet, pessoas que criam funções gigantescas como essa abaixo, para remover os caracteres de uma string.
More >
Trabalhando com Checkbox + Array no CakePHP
Sep 11th
Olá, depois de algum tempo sem postar por motivos de FALTA DE TEMPO.
Hoje vou mostrar como é simples trabalhar com checkbox no cakephp para deletar varios registros.
É muito simples, nem preciso ficar explicando muito, basta entender o que é para ser feito.
Bom, vamos la…
Primeiramente, vamos contruir nosso formulario
More >
Ler RSS com PHP
Aug 14th
Olá, hoje vou mostrar uma maneira simples de ler RSS com php, e apresenta-los como quiser.
Vamos la…
Usei o meu rss como teste, mas vocês podem usar o de qualquer um.
Criei uma variavel chamada $rss para colocar o nosso link.
$rss = 'http://flaviomuniz.com/blog/?feed=rss2';
Depois, vamos usar uma função para converter em XML o nosso rss
More >
Comentários recentes