JavaScript: Singuska » plugin http://javascript.singuska.com Fragmentos de código e gambiarras (0.2) Mon, 03 Oct 2011 19:45:27 +0000 en hourly 1 http://wordpress.org/?v=3.2 Click interrompido http://javascript.singuska.com/2011/06/22/click-interrompido/ http://javascript.singuska.com/2011/06/22/click-interrompido/#comments Wed, 22 Jun 2011 04:51:48 +0000 Flávio http://javascript.singuska.com/?p=605 Um padrão recorrente na programação em jQuery é executar uma função quando um link é clicado e, concomitantemente, evitar o que navegador carrege uma nova página ao ser clicado. É possível criar uma função que sirva de atalho para esta tarefa repetitiva:

1
2
3
4
5
6

$.fn.extend({clickPrevented: function(fn) {
	$(this).click(function(e) {
		e.preventDefault();
		fn(e);
	});
}});

A utilização aconteceria mais ou menos assim:

1
2
3

$('#apenas_um_cara').clickPrevented(function(){
        alert('Você vai continuar nesta página após o alert.');
});
]]> http://javascript.singuska.com/2011/06/22/click-interrompido/feed/ 0 hhSelectMaker: um plugin para criar selects a partir de uma fonte de dados http://javascript.singuska.com/2010/03/12/hhselectmaker-um-plugin-para-criar-selects-a-partir-de-uma-fonte-de-dados/ http://javascript.singuska.com/2010/03/12/hhselectmaker-um-plugin-para-criar-selects-a-partir-de-uma-fonte-de-dados/#comments Fri, 12 Mar 2010 16:20:27 +0000 Flávio http://javascript.singuska.com/?p=473 Criei um plugin jQuery para criar selects no DOM a partir de um vetor de dados. O código do plugin abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

(function($){
	$.fn.hhSelectMaker = function(data, cfg) {
 
		var cfg = cfg || {};
		if ( !cfg.key) cfg.key = 'key';
		if ( !cfg.value) cfg.value = 'value';
		if ( !cfg.selected) cfg.selected = false;
 
		var snippet = '';
		for (var i = 0; i < data.length; i++) {
 
			snippet += "<option value='" + data[i][cfg.key]; 
 
			if (cfg.selected === data[i][cfg.key]) {
				snippet += " selected='selected' ";
			}
 
			snippet += "'>" + data[i][cfg.value] + '</option>';
		}
		return this.append(snippet);
	};
})(jQuery);

Como funciona?

Montei dois exemplos para ilustrar o funcionamento do plugin.
O plugin recebe dois argumentos. O primeiro, obrigatório, é a fonte de dados. O segundo, opcional, é a configuração da fonte de dados.

Caso somente o primeiro argumento seja passado, o plugin espera um estrutura de dados no seguinte formato:

var dados = [
    { key: 'Chave1', value: 'Valor1' },
    { key: 'Chave2', value: 'Valor2' },
    { key: 'Chave3', value: 'Valor3' }
    // etc...
];

O nome das chaves pode ser modificado utilizando-se o segundo argumento:

$('select').hhSelectMaker(dados, {
	key: 'id', value: 'nome', selected: '5'				
});

Configurando-se o plugin desta maneira a estrutura de dados esperada é a seguinte:

var dados = [
    { id: 'Chave1', nome: 'Valor1' },
    { id: 'Chave2', nome: 'Valor2' },
    { id: 'Chave3', nome: 'Valor3' }
    // etc...
];

Além disso, a chave selected permite que um determinado valor seja selecionado como padrão após o carregamento do plugin.

]]> http://javascript.singuska.com/2010/03/12/hhselectmaker-um-plugin-para-criar-selects-a-partir-de-uma-fonte-de-dados/feed/ 0