Archive for 'add-on'
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.
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.
Solução para trabalhar com cookies em JavaScript
December 23rd, 2006. Published under add-on, javascript. 4 Comments.
Estou envolvido com um projeto, o qual necessitou da utilização de cookies. Como o projeto se baseia totalmente (e somente) de forma client-side. Minha única solução foi o JavaScript
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í.
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.