Tag Archives: DOM

Javascript: Jump Menu

Uma grande maioria dos desenvolvedores web não gostam cara padrão dos Jump Menus. Então por que não fazer um?

Pensando assim que fiz um script para gerar um Jump Menu, ou ComboBox se prefirir. Ele é composto por uma <div> (para moldura), uma <span> (para servir como rótulo) e uma lista não-ordenada de links (<ul>).

Para usá-lo, a única coisa que devemos fazer, além de linkar o script ou adicioná-lo no corpo da página, é instanciar o Objeto. E passar como parâmetro um array de array, contendo esse último na primeira posição a url e na segunda o texto a ser exibido. Após isso feito, escolha aonde adicioná-lo (pack) através do id da tag.

Ex:

var itens = Array();

for (var i=0; i<15; i++)

 itens[i] = ['https://rogeriolino.wordpress.com/', 'item ' + (i+1)];var jump = new JumpMenu(itens);

jump.setLabel(' + Click Here');

jump.pack('teste');

Para o visual basta usar de todo o potencial do CSS e estilizar como preferir.

Clique aqui para conferir o exemplo contendo o código.

Anúncios

Javascript: Rate this

Rate

Quem nunca viu aquelas “5 estrelas” logo após algum artigo, foto, etc?

Pois então, esse script cria uma sequência de links (<a>) de uma quantidade pré-definida para que o visitante possa taxar, classificar, o conteúdo da página. Seu visual é totalmente customizável através de folhas de estilos (CSS).

O código está contido na própria página do exemplo, e para usá-lo basta instanciar o objeto definindo a quantidade de “estrelas” e adicioná-lo em alguma tag (append):

var r1 = new Rate(5);

r1.onclick = function() {

     // input here your action

     alert(r1.getValue());

}

r1.setDefault(3);

r1.append("example1");

Para visualizar o exemplo clique aqui.

Javascript: Shake Text

shake.jpg

Mais um exemplo em Javascript, agora uma função, creio que conhecida por muitos já, que tem a finalidade de embaralhar o texto contido em uma tag qualquer (embaralhar o texto após passar o mouse por cima).

Há duas maneiras de usá-la, uma aplicando em apenas uma tag o evento, e a outra, aplicando o evento a todas os elementos de mesmo “tag name”.

Ex:

shakeAll('h2');

...

<h3 onmouseover="shake(this)"></h3>

clique aqui para visualizar

Javascript: Code Syntax Highlight

jscc.jpg

Algo que qualquer editor que se prese tem que ter é a capacidade de facilitar a leitura do código utilizando o que se chama Syntax Highlight . O ato de distinguir partes do código com cores diferentes ajudando assim a uma melhor associação do mesmo.O que não ocorria na web até um tempo atrás, quando alguém teve a idéia de “pintar” os códigos disponibilizados na rede. Existem vários scripts para esse fim, muitos com suporte a mais de uma sintaxe (mais de uma linguagem).

E nessa mesma onda fiz um script de fácil entendimento, com a possibilidade de personalizar o código usando CSS ficando o resultado de sua preferência.

JsCC (Javascript Colored Code) por enquanto só atende a códigos Java e Javascript, mas pretendo ir incluindo outras linguagens com o passar do tempo (e ganho de tempo também).

Para visualiza-lo em funcionamento clique aqui, download disponível aqui.

Javascript: Colorpicker

colorpicker.jpg

Para quem não conhece, colorpicker é um seletor de cores. Ou seja uma “janela” com n cores predefinidas.

Esse exemplo simula o colorpicker da Macromedia, disponível no Flash, Dreamweaver, Fireworks e etc. Como o picker da Macromedia, ele possui um display para pre-visualizar a cor e o seu valor hexadecimal ao passar o mouse sobre ela (onmouseover).

Possui métodos getColor para resgatar o valor escolhido, onchange para efetuar uma ação ao escolher uma determinada cor, entre outros.

É totalmente estilizado por CSS, logo poderá deixá-lo como quiser. Personalizando-o.

Para utilizá-lo basta indexar-lo a sua página com a tag <script> e depois criar uma nova variável do tipo Colorpicker().

Ex:

...

<script type="text/javascript" src="colorpicker.js"></script>

...

var meuCP = new ColorPicker(100, 38); // x , y

meuCP.setVisible(true);

...

Para visualizar-lo funcionando clique aqui.

Javascript: DataGrid

datagrid.jpg

Há algum tempo queria fazer algo parecido e então tirei um tempo para desenvolver, ou pelo menos tentar, uma espécie de data grid.

Este é composto por uma tabela de quantas linhas e colunas desejar, e em cada célula (<td>) contém um <div> e um <input>, no qual se alternam. Para uma hora poder alterar o seu conteúdo (mostra o <input>) e outra apenas exibi-lo (<div>).

Ao clicar duas vezes (ondbclick) na célula o atributo type do <input> é alterado,
se é text altera para hidden e seu valor é colocado dentro da <div> (innerHTML), caso contrário se é hidden altera-se para text e o seu valor recebe o conteúdo da <div> (limpando-a: div.innerHTML = “”;).

Nessa primeira versão tem uma quantidade razoável de funções, possibilitando uma boa customização. Mas nada impede de utilizar CSS para conseguir um resultado mais desejado.

Para utilizar o DataGrid é bastante simples, precisa apenas informar a quantidade de linhas e colunas e aonde deseja adicioná-la.

var datagrid = new DataGrid(10, 25);
datagrid.setCelSize(10,10);
datagrid.pack("container2");

new DataGrid(linhas, colunas) : cria um novo DataGrid, com a quantidade de linhas e colunas desejada;

setCelSize(largura, altura) : seta uma largura e altura para as células (em pixels);

pack(alvo) : inclui (append) o DataGrid no alvo desejado, passando como parâmetro o id do alvo.

Para visualiza-lo funcionando clique no link a seguir:

http://www17.brinkster.com/chivalrous/exemplos/datagrid/DataGrid.html

ps: Para reportar algum bug, dúvida ou sugestões basta deixar um comentário. Caso vá usá-lo recomendo que leia o código primeiro para poder aproveitá-lo melhor.

Javascript: Password Generator

Hoje me deparei com o fato de ter que alterar a senha do FTP, e há algum tempo queria fazer um gerador de senhas.

Então não teve momento mais oportuno, com um simples script que transforma um números aleatórios em char e pronto. Está resulvido o meu problema.

var Password = function() {
	this.pass = "";

	this.generate = function(chars) {
		for (var i= 0; i<chars; i++) {
			this.pass += this.getRandomChar();
		}
		return this.pass;
	}

	this.getRandomChar = function() {
		 /*
		*    matriz contendo em cada linha indices (inicial e final) da tabela ASCII para retornar alguns caracteres.
		*    [48, 57] = numeros;
		*    [64, 90] = "@" mais letras maiusculas;
		*    [97, 122] = letras minusculas;
		*/
		var ascii = [[48, 57],[64,90],[97,122]];
		var i = Math.floor(Math.random()*ascii.length);
		return String.fromCharCode(Math.floor(Math.random()*(ascii[i][1]-ascii[i][0]))+ascii[i][0]);
	}
}

O que tem de novo nesse script em relação ao conteúdo do blog está na funcão getRandomChar. Primeiro temos um vetor bidimensional (matriz) que guardamos em cada linha dois valores (duas colunas).

Guardamos esses dois valores porque estamos utilizando a tabela ASCII para converter número em caracter. Portanto para não termos caracteres do tipo “*”, “.”, “;” (etc) em nossa senha, temos que delimitar quais caracteres podem ser gerados. Logo o primeiro valor guarda a primeiro caracter que pode ser exibido e o segundo o último, e entre eles todos podem ser exibidos.

E para converter o valor no tão “pelejado” caracter utilizamos a função própria do Javascript da classe String ( String.fromCharCode() ), que obviamente é passado um inteiro como parâmetro e retornado um char.

Enfim o script é capaz de gerar senhas de tamanho 0 até 9999 (restringido devido que senhas muito grandes são mais demoradas para serem geradas, e pode levar a travamento do browser) contendo letras minúsculas (a até z), letras maiúsculas (A até Z), números (0 até 9) e “@” (arroba).

password_generator.jpg

Espero que seja de bom aproveito.