Mais informações sobre o w3FormValidation.

A Gecko DOM Code Hints é uma iniciativa minha em oferecer Code Hints ao se trabalhar com o DOM no Dreamweaver. Inicialmente nesta versão inicial 0.1, você terá Code Hints para todos os métodos e propriedades do objeto document. Além do Code Hints há algumas tooltips dos métodos do objeto document.

Exemplo de uso

Ao digitar o prefixo: “document.” (sem aspas) o Dreamweaver exibirá um menu popup com os métodos e propriedades do objeto document. Como demonstrado na imagem abaixo:

Agora, veja um exemplo da tooltip para lhe ajudar no preenchimento dos parâmetros dos métodos.

Faça o download da Gecko DOM CodeHints versão 0.1.

Aguardo seu feedback

Criei essa extensão para facilitar meu trabalho ao utilizar a freeDOM.js no Dreamweaver. A versão atual é a 0.1 e toda sugestão será muito bem vinda

Exemplo de uso

Uma vez que a instalação foi instalada, abra um arquivo do tipo JavaScript e digite $ (cifrão). Ao digitar esse caractere será exibido um menu popup com as funções da freeDOM.js, com isso utilize as teclas para cima e para abaixo do seu teclado para navegar entre as funções do menu.

Observe a imagem de exemplo:

Ao digitar o nome da função e abrir o parênteses, por exemplo: $after(. O Dreamweaver exibirá uma tooltip com os parâmetros da referida função; à media em que você for adicionando as vírgulas para informar o parâmetro posterior o menu é atualizado; sempre exibindo em negrito o parâmetro em questão.

Observe outra imagem de exemplo; agora com a tooltip:

Faça o download da freeDOM.js inside Dreamweaver (freeDOM-inDW), versão atual 0.1

Espero que go

w3Opacity são recursos em JavaScript para você trabalhar com efeitos de opacidade em elementos HTML de forma fácil, simples e prática.

Com o w3Opacity será simples realizar Fade Out, Fade In, Toogle de Fade, Definir opacidade e consultar a opacidade de elementos HTML. Veja alguns exemplos:

Exemplo de um Fade Out

w3Opacity.fading('img_fadeout',100,0,600);

Onde, img_fadeout é o ID do objeto; 100 é a opacidade inicial e 0 a final; 600 é o tempo em milisegundos que o efeito irá durar.

Exemplo de um Fade In

w3Opacity.fading('img_fadein',0,100,600)

Percebeu a diferença entre o Fade Out? Exatamente, a opacidade inicial é menor do que a final, somente.

Exemplo de Toggle de Fade

w3Opacity.toggle('img_togglefade',600);

O Toggle de fade funciona assim: o método – toggle – consultará a opacidade do elemento HTML, se ele estiver visível será realizado um Fade Out, caso contrário, um Fade In.

Como definir Opacidade

Definir opacidade em elementos HTML com o w3Opacity é super simples, observe:

w3Opacity.set('img_set',30);

onde img_set é o ID do objeto e 30 é a opacidade desejada, ou seja, 30% de opacidade.

Como consultar a Opacidade de um objeto

Utilize o método get_opacity para tal, assim:

w3Opacity.get_opacity('img_get_opacity');

Há outros projetos no meu Labs.

Com isto criei o w3cookies, uma forma simples e fácil para criar, ler ou deletar cookies. Observe o código abaixo:

/**
 * w3cookies (0.1) - 23/12/2006
 * Leandro Vieira Pinho
 * http://leandrovieira.com
 */
var w3cookies = {
	date: new Date(),
	// Cria o(s) cookie(s)
	// Forma de uso: w3cookies.create('nome_do_cookie','valor',dias_para_expirar);
	create: function(strName, strValue, intDays) {
		if ( intDays ) {
			this.date.setTime(this.date.getTime()+(intDays*24*60*60*1000));
			var expires = "; expires=" + this.date.toGMTString();
		} else {
			var expires = "";
		}
		document.cookie = strName + "=" + strValue + expires + "; path=/";
	},
	// Ler as informações de um cookie em específico
	// Forma de uso: w3cookies.read('nome_do_cookie');
	read: function(strName) {
		var strNameIgual = strName + "=";
		var arrCookies = document.cookie.split(";");
		for ( var i = 0, strCookie; strCookie = arrCookies[i]; i++ ) {
			while ( strCookie.charAt(0) == " ") {
				strCookie = strCookie.substring(1,strCookie.length);
			}
			if ( strCookie.indexOf(strNameIgual) == 0 ) {
				return strCookie.substring(strNameIgual.length,strCookie.length);
			}
		}
		return null;
	},
	// Delete um cookie desejado
	// Forma de uso: w3cookies.erase('nome_do_cookie');
	erase: function(strName) {
		this.create(strName,"",-1);
	}
}

Enjoy

Dúvidas? Comente aí.

Uma vez que você já inseriu a freeDOM.js na sua página, basta inserir o módulo de Ajax – freeDOM-ajax.js – ambos podem ser baixados na página da freeDOM.js. Você estará adapto a trabalhar com o Ajax com apenas uma linha de código.

Primeiramente, você precisará instanciar a classe de Ajax do módulo freeDOM-ajax.js da seguinte maneira:

var ajax = new ajax();

Feito isso, seu próximo passo é criar uma simples linha de código assim:

ajax.addRequest('/pg_serve_side.php',fnSeguinte,$('formID'));

Só isso . Mas vou explicar em detalhes.

ajax.AddRequest = chama o método – addRequest – responsável em adicionar uma nova requisição Ajax à fila.

pg_serve_side.php = Nesse primeiro parâmetro do método addRequest, você informa a URL da página responsável pela comunicação com o servidor.

fnSequinte = O segundo parâmetro do método refere-se a uma função de retorno, que você poderá utilizar para tratar os dados retornados pelo Ajax – responseText.

Para finalizar temos o terceiro parâmetro, onde informamos o formulário que contém os dados quem devem ser “coletados” e enviados juntos a requisição. Isto é uma mão na roda em tanto.

Imagine que você tenha um formulário com “trocentos” campos e para enviar os seus dados, você teria que manualmente fazer algo assim:

...
dataPost += '&nome=' + $('nome').value;
dataPost += '&email=' + $('desc').value;
...

Informando o formulário no terceiro parâmetro da freeDOM-ajax.js, ele tratará de “coletar” os dados de todos os campos do formulário informado e facilitando a sua vida.

Esse módulo – freeDOM-ajax.js – ainda está em desenvolvimento, mas já apresenta significativa vantagem para o desenvolvedor. Gostaria de saber o seu comentário a respeito desses recursos e o que ela possa vir a ter

Um grupo de campos do tipo radio – radio group – é um pouco diferente de outros tipos como: text, password, textarea, entre outros. Uma vez que o tipo radio button possue o mesmo atributo name para todos os campos de um determinado grupo e pode vir a ter id diferentes para cada um deles (óbvio).

Sendo assim, não podemos informar ao w3FormValidation o id de um radio button em específico. Mas sim, o atributo name do radio group, o qual se deseja que um dos campos seja selecionado. Juntamente com atributo name, informamos também o atributo id do formulário onde o radio group se encontra.

Ciente dessas informações, procedemos da seguinte maneira:

var c = [];
c.push('req,id_do_form:name_do_radio_group,mensagem desejada');

Ou seja, informamos ao w3FormValidation, que o tipo de validação será o req. Isto é, o campo é requerido. Em seguida informamos o ID do formulário seguindo de : – dois pontos – e o name do radio group. Logo depois a mensagem que desejamos exibir, caso nenhum dos radio button do radio group seja selecionado.

Visite a página do w3FormValidation para conhecer outros tipos de validação.

$remove($('id_do_elemento_pra_remover'));

Dessa forma a função $remove() da freeDOM utilizará o método removeChild para excluir o elemento que você informou a ela. Somente.

Mais detalhe sobre o método removeChild no Mozilla Developer Center

A função da freeDOM referente a ele é a $newTN(). Essa função possui um único e simples parâmentro – strConteudo – que refere-se a string de texto que será utilizado pelo método createTextNode afim de criar o texto desejado.

A função $newTN() também é utilizada internamente pela função $new() da freeDOM.

Veja um exemplo de utilização $newTN()

$append($newTN('Nossa trabalhar com DOM assim é legal. Não sou mais um Zé Ruela.'));

Acima, estamos utilizando a função $append() referente ao método appendChild afim de inserirmos o texto que criamos através da função $newTN().

Veja mais detalhes sobre o método createTextNode no Mozilla Developer Center

A freeDOM oferece-lhe esse recurso através da função $append e utilizá-la é muito simples, observe:

$append($new('hr'));

O exemplo acima irá inserir uma tag hr como o último filho da tag body. Mas se você deseja inserir o elemento dentro de um outro elemento em específico, é só informar a $append que elemento é esse. Assim:

$append($new('hr'),$('conteudo'));

Ou seja, a tag hr será inserida como o último filho do elemento cujo ID é igual a conteudo.