Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Carutcho

[Resolvido] [prototype]Classe De Utilidades - Continuação 01

Por , em Javascript

Recommended Posts

Carutcho    0

Carutcho
Postado

Fala aee galera beleza ?

 

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 :D

 

absss

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito