Entrar
Cadastre-se
Ajuda
Responder
Postou 26 agosto 2008 - 02:27
Esse é uma continuação da classe de Utilidades que eu postei em outro tópico .
O primeiro método que postei, foi o "newElement" feito para substituir o "createElement" do javascript.
Hj estou postando o método para substituir o "setAttribute", pelo seguinte motivo:
O setAttribute, geralmente setamos um atributo por vez e temos um grande problema quando setamos o atributo style , pq no IE não podemos fazer q nem no firefox onde podemos setar todo o Style de uma vez so apenas separando por ";", para isso acho que o prototype resolve com o setStyle, mas só ele não serve para utilizar o setAttribute de um modo mais usual.
O código abaixo não funciona no IE
element.setAttribute("style","display:block;boder:1px solid;");Dica:
Caso não tenha seguido os passos do tópico anterior , siga os exemplos e crie a classe e apenas adicione o método, assim pode concentrar todos esses métodos juntos e semrpe que for criar alguma coisa com javascript pode usar esses métodos como base e por favor não se esqueça de importar o prototype
Sintaxe do método setAttrib();
setAttrib(objeto(elemento),'atributos separados por |');
exemplo
classe.setAttrib($("idDoElemento"),'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.
Códigos de exemplo:
<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 seta atributos no elemento 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
*
*/
setAttrib: function(obj,prop)
{
if ((obj)&&(prop))
{
var loop = prop.split('|');
$A(loop).each( function(e)
{
var newE = e.split('=');
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]+";";
}
);
obj.style.cssText = sStyle; //add no ie sux
obj.setAttribute('style',sStyle);// add no ff
}
else
{
if (newE[0]=="onclick")
{
obj.onclick = newE[1];
}
if (newE[0]=="class")
{
if(document.all) newE[0] = "className";
}
if ((newE[0]=="href")||(newE[0]=="src"))
{
newE[1] = e.substring(newE[0].length + 1,e.length);
}
obj.setAttribute(newE[0],newE[1]);
}
}
);
}
else
{
return false;
}
}
function mudaAttributos ()
{
var Tool = new Tools();
Tool.setAttrib($("container"),"name=container|width=100|height=100|align=center|style=border 1px solid red;background-color=#ccc");
}
</script>
<body>
<div id="container">
</div>
<a href="java script:mudaAttributos();"> Clique e Veja </a>
</body>Caso tenha seguido o outro post é apenas necessário adicionar esse método depois do método "newElement" colocando uma "," após a "}" que fecha o método e colar esse código aqui logo abaixo:
Depois é só seguir a sintaxe la em cima.
setAttrib: function(obj,prop)
{
if ((obj)&&(prop))
{
var loop = prop.split('|');
$A(loop).each( function(e)
{
var newE = e.split('=');
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]+";";
}
);
obj.style.cssText = sStyle; //add no ie sux
obj.setAttribute('style',sStyle);// add no ff
}
else
{
if (newE[0]=="onclick")
{
obj.onclick = newE[1];
}
if (newE[0]=="class")
{
if(document.all) newE[0] = "className";
}
if ((newE[0]=="href")||(newE[0]=="src"))
{
newE[1] = e.substring(newE[0].length + 1,e.length);
}
obj.setAttribute(newE[0],newE[1]);
}
}
);
}
else
{
return false;
}
}Mais uma vez digo, não sei se existe algum framework que faça esse tipo de coisa, eu estou meio por fora pq geralmente gosto de desenvolver as aplicações com meus proprios códigos, conheço mt pouco da documentação do prototype.
Espero que gostem e até a proximo post
absss
Quote