Vou demonstrar o pedaço de um código que eu havia codificado alguns meses utilizando a freeDOM.js, e hoje, resolvi refazê-lo utilizando a jQuery. Observe:

Pedaço de código utilizando a freeDOM.js

...
var arrTagInput, i, tagInput;
arrTagInput = $tags('input');
for (i = 0; i < arrTagInput.length; i++) {
	tagInput = arrTagInput[i];
	if ( (tagInput.getAttribute('id') !== null && tagInput.getAttribute('id') !== '') && tagInput.getAttribute('id').match(/^sbt-cart-update([0-9]+)$/) ) {
		tagInputId = tagInput.getAttribute('id');
		$remove($(tagInputId));
	}
}
...

Pedaço de código utilizando a jQuery.

...
$('input[@id*=sbt-cart-update]').remove();
...

Sim, somente.

Meu objetivo com ambos os códigos é selecionar todos os elementos input da página, com os elementos selecionados, irei filtrá-lo, pegando apenas aqueles que contenham em seu atributo ID o seguinte: "sbt-cart-update".

Satisfeito.

Gecko DOM Code Hints 0.3

Na versão anterior, 0.2, o Code Hints funcionava apenas nos documentos do tipo JavaScript. Nesta versão, 0.3, o Code Hints está disponível em todos os tipos de documentos.

freeDOM.js in DW 0.2

Nesta versão, 0.2, foi adicionada todas as funções da freeDOM.js e ela também trabalhará em todos os tipos de documentos no Dreamweaver.

Downloads

• Gecko DOM Code Hints 0.3
• freeDOM.js in DW 0.2

Mais informações sobre o w3FormValidation.

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

Uma possibilidade de manter o arquivo ainda mais leve e evitar o armazenamento de funções desnecessárias.

O freeDOM Self-Service está em versão Alpha, mas já está funcional. E com algumas sugestões (assim espero) irei incrementá-lo à medida que o tempo for permitindo.

Um abraço.

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.