Archive for 'freeDOM.js'
jQuery tem me poupado consideráveis linhas de código
July 25th, 2007. Published under freeDOM.js, jquery. No Comments.
A biblioteca de JavaScript jQuery, tem me poupando consideráveis linhas de código. Meu tempo, cada dia que passa, se torna mais escasso. Então, quando posso codificar menos e viver mais, a felicidade é tamanha que você nem imagina.
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 e freeDOM.js in DW 0.2
February 7th, 2007. Published under code hints, freeDOM.js, labs. 1 Comment.
Disponível a versão 0.3 da Gecko DOM Code Hints e da versão 0.2 da freeDOM.js inside Dreamweaver. Confira os detalhes da nova versão dessas extensões para o Dreamweaver.
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
w3FormValidation 2.3
February 2nd, 2007. Published under IE, add-on, freeDOM.js, labs, w3formvalidation. 2 Comments.
Disponível a versão 2.3 do w3FormValidation. Essa versão inclui a correção de um bug em que as tags select são exibidas sobre o overlay no body no Microsoft Internet Explorer.
freeDOM.js inside Dreamweaver
January 23rd, 2007. Published under DOM, add-on, adobe, dreamweaver, freeDOM.js, javascript. 7 Comments.
O Dreamweaver passará a reconhecer as funções da freeDOM.js através da extensão freeDOM.js inside Dreamweaver.
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
freeDOM Self-Service
December 19th, 2006. Published under freeDOM.js. No Comments.
Estou disponibilizando o freeDOM Self-Service, um cardápio com as funções da freeDOM.js. Com ele você terá a freeDOM.js somente com as funções necessárias para o seu projeto.
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.
Ajax com uma linha de código.
December 18th, 2006. Published under DOM, add-on, ajax, freeDOM.js, javascript. 6 Comments.
Utilizando a freeDOM.js é possível trabalhar com o Ajax com apenas 1 (uma) linha de código. Tornando a tarefa de desenvolver interfaces mais ricas e com uma melhor interatividade com o usuário super simples.
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
Como validar radio buttons com o w3FormValidation
December 18th, 2006. Published under DOM, add-on, freeDOM.js, javascript. No Comments.
A partir da versão 2.2 o w3FormValidation suporta a validação de radio buttons, de uma forma muita simples e eficiente.
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.
freeDOM e o método removeChild
December 16th, 2006. Published under DOM, add-on, freeDOM.js. 11 Comments.
O método removeChild é utilizado para excluirmos um elemento de uma página. Utilizando a freeDOM você utilizará a função $remove() e irá configurá-la assim:
$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
freeDOM e o método createTextNode
December 16th, 2006. Published under DOM, add-on, freeDOM.js. No Comments.
O método createTextNode é utilizado para criarmos textos e assim podermos inserí-lo dentro de algum elemento.
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
freeDOM e o método appendChild
December 16th, 2006. Published under DOM, add-on, freeDOM.js. No Comments.
O método appendChild ou “acrescentar filho” é utilizado para inserimos um elemento em uma página. O elemento a ser inserido será acrescentado como o último filho de um referido elemento.
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.