Lidando com checkbox no JQuery
25/11/06
Se você precisa lidar com checkboxes e está usando JQuery, veja este plugin que criei.
/*
Author: Nando Vieira
License: Public Domain
*/
jQuery.fn.check = function(mode)
{
mode = mode || 'on';
return this.each(function(){
if (this.type == 'checkbox') {
jQuery.fn._setCheckboxState(this, mode);
} else {
$(this).field('checkbox').each(function(){
jQuery.fn._setCheckboxState(this, mode);
});
}
});
}
jQuery.fn._setCheckboxState = function(checkbox, mode)
{
switch (mode) {
case 'toggle':
checkbox.checked = !checkbox.checked;
break;
case 'off':
checkbox.checked = false;
break;
case 'on':
checkbox.checked = true;
break;
}
}
jQuery.fn.field = function(type, filter)
{
var rule;
filter = filter || '';
if(type == 'all' || !type) {
rule = 'input|textarea|select';
} else {
if (type != 'select' && type != 'textarea') {
rule = 'input[@type=' + type + ']';
} else {
rule = type;
}
}
return jQuery(rule, this).not(filter);
}
Se preferir, pode passar o próprio elemento:
$('form fieldset#preferences input[@type=checkbox]').check();
De quebra, você leva uma função que retorna todos os elementos de formulário identificados pelo tipo. Por exemplo, para retornar todos os campos "password", você pode usar:
$('form').field('password').each(function(){
alert($(this).name());
});
Você também pode filtrar quais campos quer exibir. O exemplo abaixo pega todos os campos do formulário, com exceção de "password":
$('form').field('all', '[@type=password]').each(function(){
alert($(this).name() + ' = ' + $(this).val());
});
Campos do tipo "select" e "textarea" também entram na lista de "input".
Download: jquery-checkbox.js
Tamanho: 912 bytes
Bug Fix
- A regra "all" retornava todos os "selects" e "textareas" da página e não apenas do elemento.
- Permalink
- Trackback
- Comentários (8)
- Ao som de: Satanic Surfers – Evil
Redescobrindo o Javascript com JQuery
08/09/06
Já ouviu falar em JQuery? Não?!? Então não sabe o que está perdendo. Hoje, não consigo me imaginar fazendo Javascript de outra maneira. Só para você ter uma idéia, um script que eu tinha feito para um projeto que pretendo colocar no ar em breve tinha por volta de 130 linhas de código. Utilizando JQuery caiu para 20 linhas!!!
Toda a parte burocrática do DOM (criar elementos, selecioná-los, etc) é feito de maneira genial, utilizando notação CSS 1.3 ou XPath básico. Não sabe do que estou falando? Veja um exemplo:
<div id="content">
<p>This is the first line.</p>
<p>And this is the <strong>second one</strong>.</p>
</div>
Se quisessemos adicionar um terceiro parágrafo, da maneira tradicional teríamos algo como:
var p = document.createElement('p');
p.appendChild(document.createTextNode("Hi! I'm the third paragraph"));
var div = document.getElementById('content');
div.appendChild(p);
ou, se você não liga muito para DOM:
var div = document.getElementById('content');
div.innerHTML += "<p>Hi, I'm the third paragraph.</p>";
Agora, se fossemos fazer isto em JQuery, seria mais ou menos assim:
$('div#content').append("<p>Hi, I'm the third paragraph. And powered by JQuery.</p>");
Sentiu a diferença? Você pode dizer que utilizando innerHTML nem fica tão dispendioso, mas algo muito errado poderia acontecer (anular eventos adicionados ao elemento, por exemplo). Com JQuery, isso nunca acontecerá, pois ele cria um elemento temporário e depois clona cada nodo, adicionando-o ao elemento-alvo. Simplesmente, perfeito!
Quer mais? Ele possui apenas 16kb, já com o módulo de AJAX. Nada mal se compararmos com os 60kb do Prototype (somente ele, sem o Script.aculo.us).
Uma coisa é certa: você ainda vai ouvir falar muito bem de JQuery.
- Permalink
- Trackback
- Comentários (24)
- Ao som de: Between the Trees – You Cry A Tear To Start A River
Forma otimizada de For
05/09/06
Uma coisa que sempre senti falta no Javascript era algo semelhante ao foreach do PHP. Alguns dias atrás, aprendi uma maneira que substitui bem:
var fruits = ['apple', 'orange', 'lemon'];
for (var i = 0, fruit; fruit = fruits[i]; i++) {
alert(fruit);
}
Se você não entendeu nada, aí vai: para cada iteração, definimos a variável fruit como sendo fruits[i]. Quando nosso array não tiver mais elementos, será definido como undefined e o loop é encerrado. Dica do Targa.
- Permalink
- Trackback
- Comentários (4)
- Ao som de: Allister – Radio Player
