Easy DOM Creator & Prototype & Frase do DIA

20 02 2007

NA NOVA VERÃO DO PROTOTYPE O EASY DOM CREATOR FICOU OBSOLETO 🙂 USEM O INSERT

Este é um “grande” POST.

1 – Easy DOM Creator: EDC

É uma biblioteca desenvolvida para o JQuery porém ela também é compatível com o Prototype.

O que ela faz:

Quando se programa em AJAX é muito comum a necessidade de criar objetos HTML em tempo de execução, a única saída é trabalhar com o DOM do javascript porém sabemos que isso é tedioso pois as chamadas das funções são gigantes e tem o problema do cross-borwser.

O EDC é um jeito simples de mexer com DOM, veja o exemplo:


var table =

   $.TABLE({ Class:"MyTable" },

      $.TBODY({},

         $.TR({ Class:"MyTableRow" },

            $.TD({ Class:"MyTableCol1" }, 'howdy' ),

            $.TD({ Class:"MyTableCol2" },

               'Link: ',

               $.A({ Class:"MyLink", href:"http://www.example.com" },

                  'example.com'

               )

            )

         )

      )

   );

Isso ai cria as linhas e tudo mais.

OBS: Ele não insere métodos “onClick, onBlur”, para isto ainda temos que usar o table .setAttribute(“onClick”,alert(‘teste’);

2 – Prototype:
As funções $A e each juntas são poderosas por exemplo você quer pegar todas as primeiras células de cada linha de uma tabela.

        // percorre todas as linhas
        var linhas         = $('tabela').getElementsByTagName('tr');
        var todasLinhas = $A(linhas);       todasLinhas.each(function(node){
        node.firstChild.innerHTML = texto;

3 – Como criar uma tabela dinamicamente

//alert(retorno.resultado.length);
for (i=0; i<= retorno.resultado.length;i++){
var tr = $.TR({});
for (k=0; k< retorno.resultado[i].r.length;k++){
var td = $.TD({},retorno.resultado[i].r[k].v);
tr.appendChild(td);
}
$(‘tbResultado’).appendChild(tr);
}

4 – Frase do DIA:

Código de Da Vinci! Nem sabia que ele programava.
Anselmo

 


Ações

Information

One response

5 11 2007
Manipulando DOM com Prototype 1.6 RC01 « Anselmo

[…] DOM com Prototype 1.6 RC01 05Nov07 A algum tempo postei sobre o Easy DOM Creator, uma ferramenta bastante útil para realizar a manipulação dos elementos da árvore HTML. Sendo […]

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: