[prototype]Classe De Utilidades

[Carutcho 0]

Fala aee galera beleza ?

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, você 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 você quer colocar atributos nele é necessário usar o método "setAttribute", então criei esse método que você 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 você 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 do 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:

 

<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.imasters.com.br/index.php?showforum=6|style=font:12px bold; color:red; text-decoration:none;|target=_blank')

		a.appendChild(document.createTextNode('Clique e vá ao forum de Tutoriais - Imasters'));					
		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>

Pode ser q aja alguma outra solução ou alguma framework ou algo q eu não tinha conhecimento, mas atualmente uso assim e gostaria de compartilhar.

 

Absss

[Anderson Narciso 3]

Brother já que você meche com prototype, sabe como retirar o conflito dele de (lightbox) com o JQuery?

Abraço!

[Henrique Barcelos 290]

Respondendo o colega acima:

 

• Inclua todos os arquivos do prototype antes dos jQuery
• A primeira linha do seu arquivo que faz as ações da página deve ser:

jQuery(function(){
	jQuery.noConflict();
});

• Depois disso, não use mais o cifrão ($) para trabalhar com jQuery, use sempre assim:

jQuery(seletor)...