Simples assim
Posts tagged Html
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.
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)!
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 >
Helper para upload com cakephp.
Jul 3rd
Olá, estou fazendo um projeto, que tem muitas áreas que fazem upload de imagens, então, ao invés de criar muitos helpers, fiz algo legal, e útil, economiza muito código.
Criando um helper simples, você teria os seguintes códigos.
<?php
class HImagesHelper extends Helper{
var $helpers = array("Html");
function image($id){
return $this->Html->image("/files/images/{$id}/image/origin.png");
}
}
?>
class HImagesHelper extends Helper{
var $helpers = array("Html");
function image($id){
return $this->Html->image("/files/images/{$id}/image/origin.png");
}
}
?>
Galeria com jQuery e Ajax
Jun 18th
Hoje vou mostrar como é simples fazer um galeria de imagens com jquery e ajax.
Com a jquery vamos fazer os efeitos para as imagens e com o Ajax vamos fazer o carregamento das imagens.
Vamos la, primeiro vc precisa do plugin da jquery.
Agora vamos criar a função para mostrar as imagens
$(function(){
$("#boxImages").find("a").click(function(){
var loader = $(".loading");
var newImage = $(this).attr('href');
var bigImage = $('#fullImage img').not(".loading");
$.ajax({
type:"GET",
url: $(this).attr('href'),
success:function(data){
},
complete: function(){
loader.hide();
},
beforeSend: function(){
loader.show();
bigImage.attr('src', newImage);
}
});
return false;
});
});
$("#boxImages").find("a").click(function(){
var loader = $(".loading");
var newImage = $(this).attr('href');
var bigImage = $('#fullImage img').not(".loading");
$.ajax({
type:"GET",
url: $(this).attr('href'),
success:function(data){
},
complete: function(){
loader.hide();
},
beforeSend: function(){
loader.show();
bigImage.attr('src', newImage);
}
});
return false;
});
});
Comentários recentes