Archive for 'DOM'
Gecko DOM Code Hints 0.2
February 1st, 2007. Published under DOM, adobe, code hints, dreamweaver, gecko, labs, mozilla. 3 Comments.
Finalizei a versão 0.2 da Gecko DOM Code Hints - uma extensão para o Dreamweaver que adiciona code hints ao Gecko DOM - e nessa versão há correção de bugs encontrados na versão 0.1.
Os bugs estão relacionados a duplicação dos itens que apareciam na lista do Code Hints.
Leia o poste relacionado a versão 0.1 - Gecko DOM Code Hints - Extensão para o Dreamweaver
Mais informações sobre a Gecko DOM Code Hints no meu Labs.
Gecko DOM Code Hints - Extensão para o Dreamweaver
January 29th, 2007. Published under DOM, add-on, adobe, dreamweaver, gecko, labs, mozilla. 15 Comments.
Após a criação da freeDOM.js inside Dreamweaver - uma extensão para o Dreamweaver que oferece Code Hints para as funções da freeDOM.js - acabei de finalizar a versão 0.1 da Gecko DOM Code Hints.
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 
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
w3Opacity - Efeitos de opacidade em elementos HTML com JavaScript
January 15th, 2007. Published under DOM, add-on, javascript, labs, w3opacity. 9 Comments.
Eu havia criado anteriormente o w3FadingOpacity, mas agora ele se chama w3Opacity.
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.
Gerenciador de tags em campos de formulários
January 2nd, 2007. Published under DOM, javascript, web 2.0. No Comments.
Desenvolvi uma solução em JavaScript que gerencia as tags em um campo de formulário de acordo com as configurações informadas pelo utilizador dessa solução.
Com o advento da web 2.0 tornou-se muito comum categorizar artigos, por exemplo, através de tags (rótulos). Cada aplicativo que utiliza esse tipo de categorização separa as tags através de espaços, outros com vírgulas (minha preferência), entre outros separadores. Alguns limitam a quantidade de tags durante o ato de categorizar, outros não.
A solução abaixo foi desenvolvida com base nessas divergências e por isso permite ser customizada de acordo com a característica da aplicação em que esta solução for utilizada.
/**
* w3_manager_tags (0.1) - 02/01/2007
* Leandro Vieira Pinho
* Localize-me. Blog: [ http://leandro.w3invent.com.br ], E-mail leandro[at]w3invent[dot]com[dot]br
*/
var w3_manager_tags = {
// Configuração
objFieldId: ‘id_do_campo’, // ID do campo onde as tags serão digitadas
strSpliter: ‘,’, // Separador desejado para as tags. Ex. , (vírgula) | (espaço) | ; (ponto e vírgula)
intTotalTagsMax: 5, // Total máximo de tags permitido
boolShowAlert: true, // Exibir ou não um alerta, caso exceda o total de tags
strMessage: ‘Utilize no máximo 5 (cinco) tags.’, // Mensagem a ser exibida
start: function() {
var objField = this.$(this.objFieldId);
objField.onkeyup = function() {
w3_manager_tags.manager(this.value);
};
},
manager: function(strTagsParam) {
var arrTags = strTagsParam.split(this.strSpliter);
var intTotalTags = arrTags.length;
if ( intTotalTags > this.intTotalTagsMax ) {
var strTagsInValue = “”;
for ( var i = 0; i < this.intTotalTagsMax; i++ ) {
strTagsInValue = strTagsInValue + arrTags[i] + this.strSpliter;
}
this.$(this.objFieldId).value = strTagsInValue.substring(0,(strTagsInValue.length - 1));
if ( this.boolShowAlert ) {
alert(this.strMessage);
}
}
},
$: function(strObjId) {
return document.getElementById(strObjId);
}
};
O script está auto-explicativo, bem como os itens a serem configurados. Se tiver alguma dúvida ou sugestão, comente.
Solução para limpar e resgatar o valor default do atributo value de um campo
December 28th, 2006. Published under DOM, crossbrowser, javascript. 3 Comments.
Criei uma solução super simples e prática com o intuito de limpar e resgatar o valor default do atributo value de um campo de formulário. Observe o script:
/**
* manager_field_default_value (0.1) - 28/12/2006
* Leandro Vieira Pinho
* Localize-me. Blog: [ http://leandro.w3invent.com.br ], E-mail leandro[at]w3invent[dot]com[dot]br
*/
var manager_field_default_value = {
objFieldId: ‘id_do_campo’,
start: function() {
objField = this.$(this.objFieldId);
objField.onclick = function() {
manager_field_default_value.clearDefaultValue();
}
objField.onfocus = function() {
manager_field_default_value.clearDefaultValue();
}
objField.onblur = function() {
manager_field_default_value.backDefaultValue();
}
},
clearDefaultValue: function() {
if ( this.$(this.objFieldId).value == this.$(this.objFieldId).defaultValue ) {
this.$(this.objFieldId).value = ”;
}
},
backDefaultValue: function() {
if ( this.$(this.objFieldId).value == ” ) {
this.$(this.objFieldId).value = this.$(this.objFieldId).defaultValue;
}
},
$: function(strObjId) {
return document.getElementById(strObjId);
}
}
Para usá-lo, você precisará informar apenas o atributo ID do campo desejado. E essa informação é atribuída na propriedade objFieldId. No exemplo acima, coloquei como exemplo: id_do_campo. Uma vez configurada tal propriedade, o script saberá com qual campo de formulário ele irá trabalhar.
Feita isso, você precisa apenas chamar o método start() após a página ser carregada - window.onload. O método deve ser chamado assim:
manager_field_default_value.start();
A lógica do script é a seguinte:
Ao clicar no campo de formulário informado ou quando ele receber um foco. Será verificado se o seu valor é igual ao valor atribuído ao atributo value. Caso sim, será chamado o método clearDefaultValue que deixará o campo em branco. Quando o campo perder o foco - onblur - será verificado se o valor está em branco, se tiver voltamos com o valor default do campo
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