Assine:
[prototype]classe De Utilidades
Criando classe de utilidades aos poucos.
Escrito por Carutcho em JavaScript e Ajax. Data: 19/08/2008
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Fala aee galera blz ?
Po eu não sou mt a favor de trabalhar com frameworks, mas aqui no trabalho eu tenho que trabalhar usando o prototype, então por isso que estou postando aqui com prototype, mas futuramente "quem sabe" eu recrie essas coisas com javascript puro mesmo e tals.
Bem, só para explicar mais ou menos o q eu vo postar direto aqui. Eu tenho estudado algumas coisinhas de orientação a objetos e resolvi praticar no Javascript, e para treinar isso, resolvi criar uma classe "tools" (ferramentas) para mim no qual uso aqui no trabalho e tudo, e vo posta-la aqui aos poucos.
Vão me perguntar. "pra que essa classse ?" , Simples, com uma classe de ferramentas, vc pode escrever métodos que te ajudam e facilitam a sua vida assim como as frameworks fazem, então eu meio que re-escrevi alguns métodos do javascript pra ficarem melhor de trabalhar, portanto vo postando aqui aos pouquinhos para quem achar útil.
O primeiro método que vo postar da classe aqui é um que utilizo para melhorar o método "createElement" do javascript, no javascript esse método ele cria apenas um elemento HTML, puramente isso e toda vez que vc quer colocar atributos nele é necessário usar o método "setAttribute", então criei esse método que vc pode so criar o elemento ou pode além de criar o elemento , passar os atributos para ele.
Vamos logo ao que interessa.
Dica:
Crie um arquivo separado para essa classe, pode chama-lo de Tools.js, pq essa classe pode ir aumentando de acordo que vc tenha idéias, depois pegue e faça um import dele para dentro de um HTML, esse seria o meio mais legal de fazer, mas aqui para meio de teste vo jogar tudo no mesmo lugar e não se esqueça de importar o prototype
Sintaxe do método newElement();
newElement('elemento','atributos separados por |');
exemplo
classe.newElement('div','id=idDiv|name=nome|style=boder:1px solid;');
regras de uso:
A única regra de uso é que separe os atributos com o caracter |, para o método conseguir identificar e inserir no seu elemento criado, é possivel passar apenas o elemento sem os atributos que ele cria apenas o elemento desejado.
Código de exemplo:
Não sei se alguma framework tem isso, mas eu geralmente uso assim, absssssss
Po eu não sou mt a favor de trabalhar com frameworks, mas aqui no trabalho eu tenho que trabalhar usando o prototype, então por isso que estou postando aqui com prototype, mas futuramente "quem sabe" eu recrie essas coisas com javascript puro mesmo e tals.
Bem, só para explicar mais ou menos o q eu vo postar direto aqui. Eu tenho estudado algumas coisinhas de orientação a objetos e resolvi praticar no Javascript, e para treinar isso, resolvi criar uma classe "tools" (ferramentas) para mim no qual uso aqui no trabalho e tudo, e vo posta-la aqui aos poucos.
Vão me perguntar. "pra que essa classse ?" , Simples, com uma classe de ferramentas, vc pode escrever métodos que te ajudam e facilitam a sua vida assim como as frameworks fazem, então eu meio que re-escrevi alguns métodos do javascript pra ficarem melhor de trabalhar, portanto vo postando aqui aos pouquinhos para quem achar útil.
O primeiro método que vo postar da classe aqui é um que utilizo para melhorar o método "createElement" do javascript, no javascript esse método ele cria apenas um elemento HTML, puramente isso e toda vez que vc quer colocar atributos nele é necessário usar o método "setAttribute", então criei esse método que vc pode so criar o elemento ou pode além de criar o elemento , passar os atributos para ele.
Vamos logo ao que interessa.
Dica:
Crie um arquivo separado para essa classe, pode chama-lo de Tools.js, pq essa classe pode ir aumentando de acordo que vc tenha idéias, depois pegue e faça um import dele para dentro de um HTML, esse seria o meio mais legal de fazer, mas aqui para meio de teste vo jogar tudo no mesmo lugar e não se esqueça de importar o prototype
Sintaxe do método newElement();
newElement('elemento','atributos separados por |');
exemplo
classe.newElement('div','id=idDiv|name=nome|style=boder:1px solid;');
regras de uso:
A única regra de uso é que separe os atributos com o caracter |, para o método conseguir identificar e inserir no seu elemento criado, é possivel passar apenas o elemento sem os atributos que ele cria apenas o elemento desejado.
Código de exemplo:
CODE
<script src="js/prototype.js" type="text/javascript"></script>
<script>
//criando a classe Tools com prototype;
var Tools = Class.create();
Tools.prototype = {
/**
*
* Javascript newElement com prototype.
*
* @author Reinaldo Torres - Carutcho
* @carutchows@gmail.com
*
*/
initialize: function(){},
/*--------------------------------------documentação do método-----------------------------------
* métido que cria um elemento HTML e tem a capacidade de criar suas propriedade inclusive "style"
* todas as propriedades devem estar com todas as propriedades separadas por |
* ex: id=idDoElemento|alt=Aqui um texto com espaço|style=border:1px solid #000;width=100px
*
*/
newElement: function(element,itens)
{
// validando variaveis.
_itens = (!itens) ? 0 : itens;
//tirando espaços vazios
var element = (element.replace(/^\s+|\s+$/g, "")) ? element : null;
//se não existir elemento, retornar false para sair do método.
if (element==null){return false}
element = document.createElement(element);
if (_itens!=0)
{
var loop = itens.split('|');
$A(loop).each( function(e)
{
var newE = e.split('=');
// condição pq no IEcat não le todos os atrbutos do style se tiver em uma string, tenho q adicionar 1 a 1
if(newE[0]=="style")
{
var gerStyle = newE[1].split(';');
var sStyle = ""
$A(gerStyle).each(function(style,indice)
{
_style = style.split(':');
sStyle += _style[0]+":"+_style[1]+";";
}
);
element.style.cssText = sStyle; //add no iecat
element.setAttribute('style',sStyle);// add no ff
}
else
{
if (newE[0]=="class")
{
if(document.all) newE[0] = "className";
}
if ((newE[0]=="href")||(newE[0]=="src"))
{
//aqui eu pego o valor do nó para que aceite sinais de "=" e geralmente ocorre isso quando esta no href e src
newE[1] = e.substring(newE[0].length + 1,e.length);
}
element.setAttribute(newE[0],newE[1]);
}
}
);
}
return element;
}
}
function criaElementos ()
{
var Tool = new Tools();
var div = Tool.newElement ('div','style=display:block;height:50px;border:1px solid #000;');
var p = Tool.newElement('p','style=display:block;|align=center');
var a = Tool.newElement('a','href=http://forum.ievolutionweb.com/index.php?showforum=79|style=font:12px bold; color:red; text-decoration:none;|target=_blank')
a.appendChild(document.createTextNode('Clique e vá ao forum de Tutoriais - Webly'));
p.appendChild(a);
div.appendChild(p);
$('container').appendChild(div);
}
</script>
<body>
<div id="container">
</div>
<a href="java script:criaElementos();"> Clique e Veja </a>
</body>
<script>
//criando a classe Tools com prototype;
var Tools = Class.create();
Tools.prototype = {
/**
*
* Javascript newElement com prototype.
*
* @author Reinaldo Torres - Carutcho
* @carutchows@gmail.com
*
*/
initialize: function(){},
/*--------------------------------------documentação do método-----------------------------------
* métido que cria um elemento HTML e tem a capacidade de criar suas propriedade inclusive "style"
* todas as propriedades devem estar com todas as propriedades separadas por |
* ex: id=idDoElemento|alt=Aqui um texto com espaço|style=border:1px solid #000;width=100px
*
*/
newElement: function(element,itens)
{
// validando variaveis.
_itens = (!itens) ? 0 : itens;
//tirando espaços vazios
var element = (element.replace(/^\s+|\s+$/g, "")) ? element : null;
//se não existir elemento, retornar false para sair do método.
if (element==null){return false}
element = document.createElement(element);
if (_itens!=0)
{
var loop = itens.split('|');
$A(loop).each( function(e)
{
var newE = e.split('=');
// condição pq no IEcat não le todos os atrbutos do style se tiver em uma string, tenho q adicionar 1 a 1
if(newE[0]=="style")
{
var gerStyle = newE[1].split(';');
var sStyle = ""
$A(gerStyle).each(function(style,indice)
{
_style = style.split(':');
sStyle += _style[0]+":"+_style[1]+";";
}
);
element.style.cssText = sStyle; //add no iecat
element.setAttribute('style',sStyle);// add no ff
}
else
{
if (newE[0]=="class")
{
if(document.all) newE[0] = "className";
}
if ((newE[0]=="href")||(newE[0]=="src"))
{
//aqui eu pego o valor do nó para que aceite sinais de "=" e geralmente ocorre isso quando esta no href e src
newE[1] = e.substring(newE[0].length + 1,e.length);
}
element.setAttribute(newE[0],newE[1]);
}
}
);
}
return element;
}
}
function criaElementos ()
{
var Tool = new Tools();
var div = Tool.newElement ('div','style=display:block;height:50px;border:1px solid #000;');
var p = Tool.newElement('p','style=display:block;|align=center');
var a = Tool.newElement('a','href=http://forum.ievolutionweb.com/index.php?showforum=79|style=font:12px bold; color:red; text-decoration:none;|target=_blank')
a.appendChild(document.createTextNode('Clique e vá ao forum de Tutoriais - Webly'));
p.appendChild(a);
div.appendChild(p);
$('container').appendChild(div);
}
</script>
<body>
<div id="container">
</div>
<a href="java script:criaElementos();"> Clique e Veja </a>
</body>
Não sei se alguma framework tem isso, mas eu geralmente uso assim, absssssss
Mais recentes em JavaScript e Ajax
- Background randomico
- Por JoneMulti - As vezes voce e pergunta "como é que aquele site...
- Abandone o getelementbyid
- Por Micox - “wtf mico? are you crazy?” - calma malucada, não estou...
- Funções javascript equivalentes a funções
- Por Micox - Php to javascript project: php.js...
- Select dinâmico de estados e cidades
- Por DGmike - Uma das dúvidas mais comuns para quem está começando...
- Selecionar dinâmicamente um option de um select
- Por Manito - Dica para quem fizer um form usando ajax...
Ver mais Artigos de JavaScript e Ajax.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com