JavaScript Puro: Formulários Genéricos e geradores

Assuntos Gerais
#1

No internet Explorer não funciona… Alguém com o IE9 pode e dizer se funciona? (o meu é XP com IE8)
Estou seguindo o padrão w3c.

É possível implementar utilizando JavaScript puro (w3c) para que funcione com touch screen?
quais os métodos mais importantes?
Existe algum simulador de touch?

Acho que vcs irão gostar disso:

<html>

	<script>

	var botoes = new Array();

	var modo_edicao = "Selecionar";


	var divTop = document.createElement("div"); 
	var divBotoesCrud = document.createElement("div"); 
	var divRodape = document.createElement("div"); 
	var divCentro = document.createElement("div"); 
	var divTabela = document.createElement("div"); 
	var divModalMensagem = document.createElement("div");  
	var divModalEspera = document.createElement("div");  


	var tableDados = document.createElement("table"); 

	var txt_irParaPagina = document.createElement("input"); 
	var txt_PaginaAtual = document.createElement("input"); 
	var txt_PaginasTotal = document.createElement("input"); 


	var corMuitoEscura 	= "#336699";
	var corEscura 		= "#6688bb";
	var corMedia 		= "#88aadd";
	var corClara 		= "#bad4ff";
	var corMuitoClara 	= "#d1e2ff";
	var corBranca	 	= "#FFFFFF";





	var arrayCrudButtonsVisibility = [8];
	//                              legenda
	// 
	//                              [    L, 
	//                              [    O, I,
	//                              [ S, C, N,
	//                              [ E, A, S, E, 
	//                              [ L, L, E, D, 
	//                              [ E, I, R, I, 
	//                              [ Ç, Z, Ç, T, 
	//                              [ Ã, A, Ã, A, 
	//                              [ O, R, O, R,  		
	//arrayCrudButtonsVisibility[]= [        	// Selecionar  
	arrayCrudButtonsVisibility[0] = [ 1, 0, 0, 0 ];	// Buscar
	arrayCrudButtonsVisibility[1] = [ 1, 0, 0, 0 ];	// Inserir
	arrayCrudButtonsVisibility[2] = [ 1, 0, 0, 0 ];	// Editar
	arrayCrudButtonsVisibility[3] = [ 0, 0, 0, 1 ];	// Excluir
	arrayCrudButtonsVisibility[4] = [ 0, 1, 0, 0 ];	// Localizar
	arrayCrudButtonsVisibility[5] = [ 0, 0, 1, 1 ];	// Salvar
	arrayCrudButtonsVisibility[6] = [ 0, 1, 1, 1 ];	// Limpar  
	arrayCrudButtonsVisibility[7] = [ 0, 1, 0, 0 ];	// Sair
	arrayCrudButtonsVisibility[8] = [ 0, 0, 1, 1 ];	// Cancelar


	image = function( lugar, caminhoNome ) 
	{
		var img = document.createElement("IMG");
		img.src = caminhoNome;
		lugar.appendChild(img);
		//lugar.style.backgroundImage = "url(" + caminhoNome + ")";  
	}

	
	setmodo = function ()
	{
		if(modo_edicao == "Selecionar")
		{
			for (var i=0; i<botoes.length; i++)
			{
				var obj = document.getElementById( botoes[i].id ); 
				if( botoes[i].visibilidadeModo[0]==0 ) obj.style.visibility = "hidden" ;
				else obj.style.visibility = "visible" ;
			}
		}
		else if(modo_edicao == "Buscar")
		{
			for (var i=0; i><botoes.length; i++)
			{
				var obj = document.getElementById( botoes[i].id ); 
				if( botoes[i].visibilidadeModo[1]==0 ) obj.style.visibility = "hidden" ;
				else obj.style.visibility = "visible" ;
			}
		}
		else if(modo_edicao == "Inserir")
		{
			for (var i=0; i><botoes.length; i++)
			{
				var obj = document.getElementById( botoes[i].id ); 
				if( botoes[i].visibilidadeModo[2]==0 ) obj.style.visibility = "hidden" ;
				else obj.style.visibility = "visible" ;
			}
		}
		else if(modo_edicao == "Editar")
		{
			for (var i=0; i><botoes.length; i++)
			{
				var obj = document.getElementById( botoes[i].id ); 
				if( botoes[i].visibilidadeModo[3]==0 ) obj.style.visibility = "hidden" ;
				else obj.style.visibility = "visible" ;
			}
		}
	}






	
	//=============================================================================================
	// Criar Botão
	//=============================================================================================
	loadButton = function( obj ) 
	{
		var divSombra = document.createElement("div"); 
		divSombra.style.position	= "absolute"; 
		divSombra.style.top		= obj.y ; 
		divSombra.style.left		= obj.x ; 
		divSombra.style.width 		= obj.w  ; 
		divSombra.style.height 		= obj.h  ; 
		divSombra.style.padding 	= "0px" ; 
		divSombra.style.border 		= "1px solid " + corMuitoEscura; 		
		divSombra.style.backgroundImage	= "url("+obj.fotoEscura+")";
		obj.lugar.appendChild(divSombra); 

		var iDiv = document.createElement("div"); 
		iDiv.id 			= obj.id ; 
		iDiv.style.position		= "absolute"; 
		iDiv.style.top			= obj.y ; 
		iDiv.style.left			= obj.x ; 
		iDiv.style.width 		= obj.w  ; 
		iDiv.style.height 		= obj.h  ; 
		iDiv.style.padding 		= "0px" ; 
		iDiv.style.backgroundColor 	= obj.backgroundColor  ; 
		iDiv.style.border = "1px solid "+corMuitoEscura; 
		image(iDiv,  obj.imagem ); 
		iDiv.onclick = botao.acao; 
		obj.lugar.appendChild(iDiv); 
	}


	

	



	//=============================================================================================
	// Criar Tabela
	//=============================================================================================
	createTable = function( titulo, idnome, titulos, dimensoes ) 
	{

		//=================================================
		// div
		//=================================================
		var divA = document.createElement("div");
		divA.id = idnome;

		divA.style.padding 	= "2px"  ;
		divA.style.position	= "absolute"; 
		divA.style.top     	= "0px"; 
		divA.style.right   	= "0px"; 
		divA.style.bottom  	= "0px"; 
		divA.style.left    	= "0px"; 
		divA.style.backgroundColor = corMedia  ;  


		//=========================================================
		// tabela
		//=========================================================
		divTitulo = document.createElement("div"); 
		divTitulo.style.backgroundColor 	= corEscura  ;  
		//divTitulo.style.position		= "absolute"; 
		//divTitulo.style.top      		= "5px"; 
		//divTitulo.style.left     		= "6px";  
		divTitulo.style.margin 			= "1px"; 
		divTitulo.style.padding 		= "5px"; 
		divTitulo.style.border 			= "1px solid " + corMuitoEscura; 
		divTitulo.style.fontWeight 		= "bold";
		divTitulo.style.color			= corBranca;
		divTitulo.innerHTML 			= titulo;
		divA.appendChild(divTitulo);


		//=========================================================
		// campos
		//=========================================================
		var tableTitulos = document.createElement("table"); 
		//tableTitulos.style.position		="absolute";  
		//tableTitulos.style.top      		= "32px"; 
		tableTitulos.style.paddingTop		= "0px"; 
		tableTitulos.style.width 		= "100%";
		tableTitulos.cellSpacing 		= "1px"  ; 
		tableTitulos.cellPadding 		= "0px"  ;
		rowA = tableTitulos.insertRow(0); 
		var total=0;
		for(var i=0; i><titulos.length; i++)
		{
	    		colA = rowA.insertCell(i);
			colA.style.fontWeight = "bold";
			colA.style.width = dimensoes[i];
			colA.style.padding = "2px";
			colA.style.border = "1px solid #336699";
			colA.style.backgroundColor = corClara  ; 
			colA.innerHTML = titulos[i]; 
			colA.style.fontSize = "10pt";
			total=i;
		}
		colA = rowA.insertCell(total+1); 
		colA.style.backgroundColor = corClara;
		colA.style.border = "1px solid "+corMuitoEscura;
		var img = document.createElement("IMG");
		img.src = "barra.png";
		colA.appendChild(img);


		divA.appendChild(tableTitulos);

		//=========================================================
		// dados
		//=========================================================
		tableDados.cellSpacing = "0px"  ; 
		tableDados.cellPadding = "0px"  ; 
		tableDados.style.width = "100%";



		tableDados.limpar = function()
		{ 
			TRs = this.getElementsByTagName('tr');
			for(var h=0; h><TRs.length; h++)
			{
				TDs = TRs[h].getElementsByTagName('td');
				for(var h2=0; h2><TDs.length; h2++)
				{
					if( TDs[0].innerHTML == "&nbsp;" )
					{
						TDs[h2].style.backgroundColor = corMedia;  
					}
					else //if( this.parentNode.getElementsByTagName('td')[0].innerHTML != "&nbsp;" )
					{
						TDs[h2].style.backgroundColor = "#F0F8FF"; 
					}
				}
			}
		}


		for(var y=0; y><50; y++)
		{
			rowA = tableDados.insertRow(y); 
			for(var i=0; i<titulos.length; i++)
			{
		    		colA = rowA.insertCell(i);
				colA.innerHTML = "&nbsp;"; 
				colA.style.width = dimensoes[i];
				colA.style.padding = "2px";
				colA.style.borderBottom = "1px solid "+corMuitoEscura;
				colA.style.borderLeft = "1px solid "+corMuitoEscura;
  

				//colA.style.backgroundColor = "#F0F8FF"  ; 
				colA.style.backgroundColor = corMedia  ; 
				colA.style.fontSize = "10pt";

				colA.onclick = function()
				{ 
					test1 = this.parentNode.getElementsByTagName('td')[0];
					if(test1.innerHTML != "&nbsp;")
					{
						objsTitulos = tableTitulos.getElementsByTagName('tr')[0].getElementsByTagName('td');

						tableDados.limpar();

						arrayResp = new Array();
						//resp = "";
						for(var h=0; h><objsTitulos.length-1; h++)
						{
							//resp+="'"+objsTitulos[h].innerHTML +"':'"+ this.parentNode.getElementsByTagName('td')[h].innerHTML+"', "; 
							arrayResp.push(this.parentNode.getElementsByTagName('td')[h].innerHTML);
							if( this.parentNode.getElementsByTagName('td')[0].innerHTML != "&nbsp;" )
							{
								this.parentNode.getElementsByTagName('td')[h].style.backgroundColor = corMuitoClara; 
							} 
						}
						//if(resp.length>0){ resp = resp.substring(0, resp.length-2)};
						tabelaSelecionar( arrayResp );
					}
				}
			}
		}

 

		tableDados.getIntColunName = function( str )
		{
			ssss = tableTitulos.getElementsByTagName('tr')[0].getElementsByTagName('td');
			for( var i=0; i<ssss.length; i++)
			{
				if(ssss[i]==str)return i;
			}
		}


		tableDados.removeAll = function()
		{
			for( var y=0; y><tableDados.getElementsByTagName('tr').length; y++)
			{
				for( var x=0; x><tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td').length; x++)
				{
					tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td')[x].innerHTML = "&nbsp;";
					tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td')[x].style.backgroundColor = corMedia; 
				}
			}
		}

		tableDados.setData = function(dados)
		{
			for( var y=0; y><dados.length; y++)
			{
				for( var x=0; x><dados[y].length; x++)
				{
					tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td')[x].innerHTML = dados[y][x];
				}
			}
			tableDados.limpar();
		}

		divScroll = document.createElement("div"); 

		divScroll.style.position="absolute"; 
		divScroll.style.border = "1px solid "+corMuitoEscura;

		divScroll.style.top= "57px"; 
		divScroll.style.right= "3px"; 
		divScroll.style.bottom= "31px"; 
		divScroll.style.left= "3px";  
		divScroll.style.overflow = "auto" ;  

		//divScroll.style.height 	= "120px"  ; 

		divScroll.appendChild(tableDados);
		divA.appendChild(divScroll);


		//=========================================================
		// cursor
		//=========================================================
		var tableCursor = document.createElement("div"); 
		tableCursor.style.position="absolute"; 
		tableCursor.style.left = "2px";
		tableCursor.style.right = "2px";
		tableCursor.style.height = "24px"; 
		tableCursor.style.bottom= "2px";  
		tableCursor.style.margin = "1px"; 
		tableCursor.style.border = "1px solid "+corMuitoEscura;
		tableCursor.style.backgroundColor = corEscura ; 



		// =================================== 
		txt_irParaPagina.type = "text"; 
		txt_irParaPagina.lugar = tableCursor ; 
		txt_irParaPagina.id = "btn_irParaPagina" ; 
		txt_irParaPagina.style.position="absolute"; 
		txt_irParaPagina.style.left = "2px"; 
		txt_irParaPagina.style.top   = "2px" ; 
		txt_irParaPagina.style.width = "57px" ; 
		txt_irParaPagina.style.height= "20px" ;   
		txt_irParaPagina.style.border = "1px solid "+corMuitoEscura;
		tableCursor.appendChild(txt_irParaPagina); 


		// =================================== 
		botao  = document.createElement("div");  
		botao.lugar = tableCursor ; 
		botao.id = "Ir" ; 
		botao.style.position="absolute"; 
		botao.style.fontWeight = "bold";
		botao.style.left = "60px"; 
		botao.style.top = "2px" ; 
		botao.style.width = "20px" ; 
		botao.style.height= "20px" ;  
		//botao.style.backgroundColor = corEscura ; 
		//botao.style.border = "1px solid "+corMuitoEscura;
		botao.onclick = Ir_Click ; 
		var img = document.createElement("IMG");
		img.src = "ir.png";
		botao.appendChild(img); 
		tableCursor.appendChild(botao);  
 


		// =================================== 
		botao  = document.createElement("div");  
		botao.lugar = tableCursor ; 
		botao.id = "Primeira" ; 
		botao.style.position="absolute"; 
		botao.style.fontWeight = "bold";
		botao.style.right = "350px"; 
		botao.style.top = "2px" ; 
		botao.style.width = "20px" ; 
		botao.style.height= "20px" ;  
		//botao.style.backgroundColor = corEscura ; 
		//botao.style.border = "1px solid "+corMuitoEscura;
		var img = document.createElement("IMG");
		img.src = "primeira.png";
		botao.onclick = Primeira_Click;
		botao.appendChild(img); 
		tableCursor.appendChild(botao);   


		// =================================== 
		botao  = document.createElement("div");  
		botao.lugar = tableCursor ; 
		botao.id = "Anterior" ; 
		botao.style.position="absolute"; 
		botao.style.fontWeight = "bold";
		botao.style.right = "325px"; 
		botao.style.top = "2px" ; 
		botao.style.width = "20px" ; 
		botao.style.height= "20px" ;  
		//botao.style.backgroundColor = corEscura ; 
		//botao.style.border = "1px solid "+corMuitoEscura; 
		var img = document.createElement("IMG");
		img.src = "anterior.png";
		botao.onclick = Anterior_Click;
		botao.appendChild(img); 
		tableCursor.appendChild(botao);   


		// =================================== 
		txt_PaginaAtual.type = "text"; 
		txt_PaginaAtual.lugar = tableCursor ; 
		txt_PaginaAtual.disabled=true  
		txt_PaginaAtual.id = "pagina" ; 
		txt_PaginaAtual.style.position="absolute"; 
		txt_PaginaAtual.style.right = "265px"; 
		txt_PaginaAtual.style.top   = "2px" ; 
		txt_PaginaAtual.style.width = "57px" ; 
		txt_PaginaAtual.style.height= "20px" ;   
		txt_PaginaAtual.style.border = "1px solid "+corMuitoEscura;
		tableCursor.appendChild(txt_PaginaAtual); 


		// =================================== 
		botao  = document.createElement("div");  
		botao.lugar = tableCursor ; 
		botao.id = "Proxima" ; 
		botao.style.position="absolute"; 
		botao.style.fontWeight = "bold";
		botao.style.right = "240px"; 
		botao.style.top = "2px" ; 
		botao.style.width = "20px" ; 
		botao.style.height= "20px" ;  
		//botao.style.backgroundColor = corEscura ; 
		//botao.style.border = "1px solid "+corMuitoEscura;
		var img = document.createElement("IMG");
		img.src = "proxima.png";
		botao.onclick = Proxima_Click;
		botao.appendChild(img); 
		tableCursor.appendChild(botao);  

		// =================================== 
		botao  = document.createElement("div");  
		botao.lugar = tableCursor ; 
		botao.id = "Ultima" ; 
		botao.style.position="absolute"; 
		botao.style.fontWeight = "bold";
		botao.style.right = "215px"; 
		botao.style.top = "2px" ; 
		botao.style.width = "20px" ; 
		botao.style.height= "20px" ;  
		//botao.style.backgroundColor = corEscura ; 
		//botao.style.border = "1px solid "+corMuitoEscura;
		var img = document.createElement("IMG");
		img.src = "ultima.png";
		botao.onclick = Ultima_Click;
		botao.appendChild(img); 
		tableCursor.appendChild(botao);  

		// =================================== 
		botao = document.createElement("div");  
		botao.lugar = tableCursor ;  
		botao.innerHTML = "Total de Páginas:";
		botao.style.position="absolute"; 
		botao.style.color = corBranca; 
		//botao.style.fontWeight = "bold";
		botao.style.right = "70px"; 
		botao.style.top = "3px" ; 
		botao.style.width = "120px" ; 
		botao.style.height= "20px" ;   
		tableCursor.appendChild(botao); 

		// =================================== 
		txt_PaginasTotal.type = "text"; 
		txt_PaginasTotal.lugar = tableCursor ; 
		txt_PaginasTotal.disabled=true  
		txt_PaginasTotal.id = "pagina" ; 
		txt_PaginasTotal.style.position="absolute"; 
		txt_PaginasTotal.style.right = "30px"; 
		txt_PaginasTotal.style.top = "2px" ; 
		txt_PaginasTotal.style.width = "55px" ; 
		txt_PaginasTotal.style.height= "20px" ;    
		txt_PaginasTotal.style.border = "1px solid "+corMuitoEscura;
		tableCursor.appendChild(txt_PaginasTotal); 


		divA.appendChild(tableCursor);

		return divA; 
	}




	//=============================================================================================
	// Cria Modal Area
	//=============================================================================================
	CriatePanelCRUD = function()
	{
		// ===================================
		divBotoesCrud.style.position	= "absolute";
		divBotoesCrud.style.bottom	= "45px";  
		divBotoesCrud.style.right	= "5px"; 
		divBotoesCrud.style.left	= "5px"; 
		divBotoesCrud.style.height 	= "43px"; 
		divBotoesCrud.style.border 	= "1px solid "+corMuitoEscura;
		document.body.appendChild( divBotoesCrud );

		// =================================== 
		botao = new Object(); 
		botoes.push( botao );
		botao.lugar = divBotoesCrud ; 
		botao.id = "Buscar" ; 
		botao.x = "3px"; 
		botao.y = "3px" ; 
		botao.w = "35px" ; 
		botao.h = "35px" ; 
		botao.visibilidadeModo = arrayCrudButtonsVisibility[botoes.length-1];
		botao.imagem = "buscar2.png" ; 
		botao.fotoEscura = "buscar0.png" ; 
		botao.backgroundColor = corEscura ; 
		botao.acao = Buscar_Click ; 
		loadButton( botao ); 

		// =================================== 
		botao = new Object();
		botoes.push( botao );
		botao.lugar = divBotoesCrud ;
		botao.id = "Inserir" ;
		botao.x = "50px" ;
		botao.y = "3px" ; 
		botao.w = "35px" ;
		botao.h = "35px" ; 
		botao.visibilidadeModo = arrayCrudButtonsVisibility[botoes.length-1];
		botao.imagem = "inserir.png" ;
		botao.fotoEscura = "inserir0.png" ; 
		botao.backgroundColor = corEscura ;
		botao.acao = Inserir_Click ; 
		loadButton( botao );

		// =================================== 
		botao = new Object();
		botoes.push( botao );
		botao.lugar = divBotoesCrud ;
		botao.id = "Editar" ;
		botao.x = "100px" ;
		botao.y = "3px" ; 
		botao.w = "35px" ;
		botao.h = "35px" ; 
		botao.visibilidadeModo = arrayCrudButtonsVisibility[botoes.length-1];
		botao.imagem = "editar.png" ;
		botao.fotoEscura = "editar0.png" ; 
		botao.backgroundColor = corEscura ;
		botao.acao = Editar_Click ; 
		loadButton( botao );

		// =================================== 
		botao = new Object();
		botoes.push( botao );
		botao.lugar = divBotoesCrud ;
		botao.id = "Excluir" ;
		botao.x = "150px" ;
		botao.y = "3px" ; 
		botao.w = "35px" ;
		botao.h = "35px" ; 
		botao.visibilidadeModo = arrayCrudButtonsVisibility[botoes.length-1];
		botao.imagem = "lixo.png" ;
		botao.fotoEscura = "lixo0.png" ; 
		botao.backgroundColor = corEscura ;
		botao.acao = Excluir_Click ; 
		loadButton( botao );

		// =================================== 
		botao = new Object();
		botoes.push( botao );
		botao.lugar = divBotoesCrud ;
		botao.id = "Localizar" ;
		botao.x = "200px" ;
		botao.y = "3px" ; 
		botao.w = "35px" ;
		botao.h = "35px" ; 
		botao.visibilidadeModo = arrayCrudButtonsVisibility[botoes.length-1];
		botao.imagem = "localizar.png" ;
		botao.fotoEscura = "localizar0.png" ; 
		botao.backgroundColor = corEscura ;
		botao.acao = Localizar_Click ; 
		loadButton( botao );

		// =================================== 
		botao = new Object();
		botoes.push( botao );
		botao.lugar = divBotoesCrud ;
		botao.id = "Salvar" ;
		botao.x = "250px" ;
		botao.y = "3px" ; 
		botao.w = "35px" ;
		botao.h = "35px" ; 
		botao.visibilidadeModo = arrayCrudButtonsVisibility[botoes.length-1];
		botao.imagem = "salvar.png" ;
		botao.fotoEscura = "salvar0.png" ; 
		botao.backgroundColor = corEscura ;
		botao.acao = Salvar_Click ; 
		loadButton( botao );

		// =================================== 
		botao = new Object();
		botoes.push( botao );
		botao.lugar = divBotoesCrud ;
		botao.id = "Limpar" ;
		botao.x = "300px";
		botao.y = "3px" ; 
		botao.w = "35px" ;
		botao.h = "35px" ; 
		botao.visibilidadeModo = arrayCrudButtonsVisibility[botoes.length-1];
		botao.imagem = "limpar.png" ;
		botao.fotoEscura = "limpar0.png" ; 
		botao.backgroundColor = corEscura ;
		botao.acao = Limpar_Click ; 
		loadButton( botao );

		// =================================== 
		botao = new Object();
		botoes.push( botao );
		botao.lugar = divBotoesCrud ;
		botao.id = "Sair" ;
		botao.x = "350px";
		botao.y = "3px" ; 
		botao.w = "35px" ;
		botao.h = "35px" ; 
		botao.visibilidadeModo = arrayCrudButtonsVisibility[botoes.length-1];
		botao.imagem = "sair.png" ;
		botao.fotoEscura = "sair0.png" ; 
		botao.backgroundColor = corEscura ;
		botao.acao = Sair_Click ; 
		loadButton( botao );

		// =================================== 
		botao = new Object();
		botoes.push( botao );
		botao.lugar = divBotoesCrud ;
		botao.id = "Cancelar" ;
		botao.x = "400px";
		botao.y = "3px" ; 
		botao.w = "35px" ;
		botao.h = "35px" ; 
		botao.visibilidadeModo = arrayCrudButtonsVisibility[botoes.length-1];
		botao.imagem = "cancelar.png" ;
		botao.fotoEscura = "cancelar0.png" ; 
		botao.backgroundColor = corEscura ;
		botao.acao = Cancelar_Click ; 
		loadButton( botao );

	}


	//=============================================================================================
	// Cria Modal Espera
	//=============================================================================================
	CriateModalEspera = function()
	{
		// =======================================================
		divModalEspera.id		= "divModalEspera";
		divModalEspera.style.position	= "absolute";
		divModalEspera.style.bottom	= "0px";  
		divModalEspera.style.top	= "0px";  
		divModalEspera.style.right	= "0px"; 
		divModalEspera.style.left	= "0px";  
		divModalEspera.style.border 	= "1px solid "+corMuitoEscura;
		divModalEspera.style.backgroundImage =  "url(alpha.png)"  ;
		divModalEspera.style.backgroundRepeat  = "repeat" ;
		divModalEspera.style.visibility="visible";
		divModalEspera.Close = function()
		{
			divModalEspera.style.visibility	="hidden";
		}
		divModalEspera.Show = function()
		{
			divModalEspera.style.visibility	="visible";
		} 	
		document.body.appendChild( divModalEspera );
	}


	//=============================================================================================
	// Cria Modal Mensagem
	//=============================================================================================
	CriateModalMensagem = function()
	{
		// =======================================================
		var messagemText = document.createElement("div"); 
		var messagem = document.createElement("div");
		messagem.appendChild( messagemText );
		divModalMensagem.id		= "divModalMensagem";
		divModalMensagem.style.position	= "absolute";
		divModalMensagem.style.bottom	= "0px";  
		divModalMensagem.style.top	= "0px";  
		divModalMensagem.style.right	= "0px"; 
		divModalMensagem.style.left	= "0px";  
		divModalMensagem.style.border 	= "1px solid "+corMuitoEscura; 
		divModalMensagem.style.backgroundImage =  "url(alpha.png)"  ;
		divModalMensagem.style.backgroundRepeat  = "repeat" ;
		divModalMensagem.style.visibility="hidden";
		divModalMensagem.Close = function()
		{
			divModalMensagem.style.visibility	="hidden";
		}
		divModalMensagem.Show = function()
		{
			divModalMensagem.style.visibility	="visible";
		}
		divModalMensagem.setMessage = function(str, tipo)
		{
			messagemText.innerHTML = str ;
		}		

		// =======================================================
		messagem.style.position	= "absolute";
		messagem.style.bottom	= "100px";  
		messagem.style.top	= "100px";  
		messagem.style.right	= "100px"; 
		messagem.style.left	= "100px";  
		messagem.style.padding	= "10px";  
		messagem.style.maggin	= "10px"; 
		messagem.style.border 	= "1px solid "+corMuitoEscura;
		messagem.style.backgroundImage 		= "url(alpha.png)"  ;
		messagem.style.backgroundRepeat  	= "repeat" ;

		//==============================================
		btn = document.createElement("input");
		btn.type 		= "button" ; 
		btn.value 		= "Ok"; 
		btn.style.position	= "absolute";
		btn.style.bottom	= "5px";  
		btn.style.right		= "5px";  
		btn.onclick		= function()
		{
			divModalMensagem.Close();
		}  
		messagem.appendChild( btn );
		divModalMensagem.appendChild( messagem );
		document.body.appendChild( divModalMensagem );
	}




	//=============================================================================================
	// Load Page
	//=============================================================================================
	loadPage = function()
	{
		document.body.style.backgroundColor = corClara;  

		// =======================================================
		divTop.style.position	= "absolute";
		divTop.style.padding	= "5px";  
		divTop.style.top	= "5px";  
		divTop.style.right	= "5px"; 
		divTop.style.left	= "5px"; 
		divTop.style.height 	= "60px"; 
		divTop.style.border 	= "1px solid "+corMuitoEscura;
		document.body.appendChild( divTop );  
		divTop.innerHTML = "Ola";



		// =======================================================
		divRodape.style.position= "absolute"; 
		divRodape.style.bottom	= "2px";  
		divRodape.style.right	= "5px"; 
		divRodape.style.left	= "5px"; 
		divRodape.style.height 	= "40px"; 
		divRodape.style.border 	= "1px solid "+corMuitoEscura;
		document.body.appendChild( divRodape );
		// =================================== 
		botao = new Object();  
		botao.lugar = divRodape ; 
		botao.id = "testeModal" ; 
		botao.x = "3px"; 
		botao.y = "3px" ; 
		botao.w = "35px" ; 
		botao.h = "35px" ;  
		botao.imagem = "buscar2.png" ; 
		botao.fotoEscura = "buscar0.png" ; 
		botao.backgroundColor = corEscura ; 
		botao.acao = testeModal_Click ; 
		loadButton( botao ); 


		
		// =======================================================
		divCentro.id 			= "formulario" ;
		divCentro.style.position	= "absolute";  
		divCentro.style.top		= "80px"; 
		divCentro.style.rigth		= "5px"; 
		divCentro.style.bottom		= "92px"; 
		divCentro.style.left		= "5px"; 
		divCentro.style.width 		= "560px"; 
		divCentro.style.padding 	= "5px" ; 
		divCentro.style.border 		= "1px solid "+corMuitoEscura;
		divCentro.addFormularios 	= function(formularios)
		{
			for(var i=0; i><formularios.length; i++)
			{
				ob = document.createElement("div"); 
				ob.id			= formularios[i].id
				ob.style.position	= "absolute";  
				ob.style.top		= formularios[i].top; 
				ob.style.bottom		= formularios[i].bottom; 
				ob.style.left		= formularios[i].left; 
				ob.style.right		= formularios[i].right; 


				for(var j=0; j><formularios[i].model.length; j++)
				{
					if(formularios[i].model[j].type=="div")
					{
						cam = document.createElement("div");
						cam.innerHTML 	= formularios[i].model[j].value;
					}  
					else if(formularios[i].model[j].type=="checkbox")
					{
						cam = document.createElement("input");
  						cam.type = "checkbox";
						cam.value 	= formularios[i].model[j].value;
					} 
					else if(formularios[i].model[j].type=="radio")
					{
						cam = document.createElement("input");
  						cam.type = "radio"; 
						cam.name = formularios[i].model[j].name;
						cam.value 	= formularios[i].model[j].value;
					} 
					else if(formularios[i].model[j].type=="combobox")
					{
						cam = document.createElement("select");

						cam.value 	= formularios[i].model[j].value;
					} 
					else if(formularios[i].model[j].type=="text")
					{ 
						cam = document.createElement("input");
						cam.value 	= formularios[i].model[j].value;
					}
					else if(formularios[i].model[j].type=="password")
					{
						cam = document.createElement("input");
  						cam.type = "password"; 
						cam.value 	= formularios[i].model[j].value;
					}
					else if(formularios[i].model[j].type=="titulo")
					{
						cam = document.createElement("div"); 

						cam.style.position	= "absolute";  
						cam.style.margin	= "3px";
						cam.style.padding	= "2px"; 
						cam.style.left		= "0px"; 
						cam.style.right		= "0px"; 
						cam.style.top		= formularios[i].model[j].y; 
						cam.style.height	= formularios[i].model[j].h; 
						cam.style.backgroundColor = corEscura; 
						cam.style.border 	= "1px solid "+corMuitoEscura; 
						cam.style.color		= corBranca; 
						cam.style.fontWeight	= "bold";
						cam.innerHTML = formularios[i].model[j].value; 
					} 
					cam.id			= formularios[i].model[j].id
					cam.style.position	= "absolute";  
					cam.style.top		= formularios[i].model[j].y; 
					cam.style.left		= formularios[i].model[j].x; 
					cam.style.width		= formularios[i].model[j].w; 
					cam.style.height	= formularios[i].model[j].h; 
					//ob.style.border 	= "1px solid "+corMuitoEscura; 
					ob.appendChild( cam );
				}

				//ob.style.border 	= "1px solid "+corMuitoEscura; 
				divCentro.appendChild( ob );

			}
		}
		document.body.appendChild( divCentro );

		// =======================================================
		divTabela.id 			= "tabela" ;
		divTabela.style.position	= "absolute";  
		divTabela.style.top		= "80px"; 
		divTabela.style.left		= "580px"; 
		divTabela.style.right		= "5px"; 
		divTabela.style.bottom		= "92px";  
		divTabela.style.padding 	= "0px" ; 
		//divTabela.style.width 	= "100%"; 
		divTabela.style.border 		= "1px solid "+corMuitoEscura;
		document.body.appendChild( divTabela );	

		CriatePanelCRUD () ;
		CriateModalMensagem () ;
		CriateModalEspera();
		load();  
		divModalEspera.Close();
		setmodo();
	}





	load = function()
	{


		Formularios = new Array();
		Formularios[0]=  new Object();
		Formularios[0].id = "Pessoa" ; 
		Formularios[0].top	= "0px";
		Formularios[0].bottom	= "0px";
		Formularios[0].left	= "0px";
		Formularios[0].right	= "0px";
		Formularios[0].height	= "50px";


		var objC =  new Object(); 
		objC.type= "titulo";
		objC.left	= "0px";
		objC.right	= "0px";
		objC.y	= "0px";
		objC.h	= "20px";
		objC.value = "Pessoas";

		var objA =  new Object();
		objA.id 	= "nome";
		objA.type= "div";
		objA.x	= "5px";
		objA.y	= "35px";
		objA.w	= "65px";
		objA.h	= "20px";
		objA.value = "5px";

		var objB =  new Object();
		objB.id 	= "nome";
		objB.type= "text";
		objB.x	= "85px";
		objB.y	= "35px";
		objB.w	= "65px";
		objB.h	= "20px";
		objB.value = "5px";

		var objD =  new Object();
		objD.id 	= "nome";
		objD.type= "combobox";
		objD.x	= "235px";
		objD.y	= "35px";
		objD.w	= "65px";
		objD.h	= "20px";
		objD.value = "5px";

		var objE =  new Object();
		objE.id 	= "nome";
		objE.type= "checkbox";
		objE.x	= "295px";
		objE.y	= "35px";
		objE.w	= "25px";
		objE.h	= "20px";
		objE.value = "5px";

		var objF =  new Object();
		objF.nome 	= "nome";
		objF.type= "radio";
		objF.x	= "325px";
		objF.y	= "35px";
		objF.w	= "25px";
		objF.h	= "20px";
		objF.value = "opaaa w";

		var objG =  new Object();
		objG.nome 	= "nome";
		objG.type= "radio";
		objG.x	= "325px";
		objG.y	= "55px";
		objG.w	= "25px";
		objG.h	= "20px";
		objG.value = "opaaa e";

		var objG =  new Object();
		objG.nome 	= "nome";
		objG.type= "password";
		objG.x	= "125px";
		objG.y	= "55px";
		objG.w	= "85px";
		objG.h	= "20px";
		objG.value = "opaaa e";

		Formularios[0].model = [objC,objA,objB,objD,objE,objF, objG] ;



		Formularios[1]=  new Object();
		Formularios[1].id = "Pessoa" ; 
		Formularios[1].top	= "80px";
		Formularios[1].bottom	= "0px";
		Formularios[1].left	= "0px";
		Formularios[1].right	= "0px";

		var objC =  new Object(); 
		objC.type= "titulo";
		objC.left	= "0px";
		objC.right	= "0px";
		objC.y	= "0px";
		objC.h	= "20px";
		objC.value = "Pessoas";

		var objA =  new Object();
		objA.id 	= "nome";
		objA.type= "div";
		objA.x	= "5px";
		objA.y	= "35px";
		objA.w	= "65px";
		objA.h	= "20px";
		objA.value = "5px";

		var objB =  new Object();
		objB.id 	= "nome";
		objB.type= "text";
		objB.x	= "85px";
		objB.y	= "35px";
		objB.w	= "65px";
		objB.h	= "20px";
		objB.value = "5px";

		var objD =  new Object();
		objD.id 	= "nome";
		objD.type= "combobox";
		objD.x	= "235px";
		objD.y	= "35px";
		objD.w	= "65px";
		objD.h	= "20px";
		objD.value = "5px";

		var objE =  new Object();
		objE.id 	= "nome";
		objE.type= "checkbox";
		objE.x	= "285px";
		objE.y	= "35px";
		objE.w	= "65px";
		objE.h	= "20px";
		objE.value = "5px";
		Formularios[1].model = [objC,objA,objB,objD,objE] ;

		divCentro.addFormularios( Formularios ) ;

		divTabela.appendChild( createTable("Nome tabela", "table_id", ["id", "nome"], ["10%", "90%"] ) ); 

		var arrayDatateste = new Array();
		arrayDatateste[0] = new Array();
		arrayDatateste[0][0] = "1";
		arrayDatateste[0][1] = "Luiz";
		arrayDatateste[1] = new Array();
		arrayDatateste[1][0] = "2";
		arrayDatateste[1][1] = "Augusto";
		arrayDatateste[2] = new Array();
		arrayDatateste[2][0] = "3";
		arrayDatateste[2][1] = "Sofia";
		arrayDatateste[3] = new Array();
		arrayDatateste[3][0] = "4";
		arrayDatateste[3][1] = "Oliveira";

		tableDados.setData(arrayDatateste);

		//tableDados.removeAll();
	}







	Buscar_Click = function() 
	{ 
		modo_edicao = "Buscar";
		setmodo();
	} 
	Inserir_Click = function() 
	{ 
		modo_edicao = "Inserir";
		setmodo();
	}
	Editar_Click = function() 
	{ 
		modo_edicao = "Editar";
		setmodo();
	}
	Excluir_Click = function() 
	{ 
		modo_edicao = "Selecionar";
		setmodo();
	}
	Localizar_Click = function() 
	{ 
		modo_edicao = "Selecionar";
		setmodo();
	}
	Salvar_Click = function() 
	{ 
		modo_edicao = "Selecionar";
		setmodo();
	}
	Limpar_Click = function() 
	{ 
		//modo_edicao = "Selecionar";
		//setmodo();
	}
	Sair_Click = function() 
	{ 
		modo_edicao = "Selecionar";
		setmodo();
	}
	Cancelar_Click = function() 
	{ 
		modo_edicao = "Selecionar";
		setmodo();
	}



	Ir_Click = function() 
	{ 
		divModalMensagem.setMessage( "Ir", "sf" );
		divModalMensagem.Show();
		// txt_irParaPagina.value 
		// txt_PaginaAtual.value 
		// txt_PaginasTotal.value  
	}
	Primeira_Click = function() 
	{ 
		divModalMensagem.setMessage( "Primeira", "sf" );
		divModalMensagem.Show();
		// txt_irParaPagina.value 
		// txt_PaginaAtual.value 
		// txt_PaginasTotal.value  
	}
	Anterior_Click = function() 
	{  
		divModalMensagem.setMessage( "Anterior", "sf" );
		divModalMensagem.Show();
		// txt_irParaPagina.value 
		// txt_PaginaAtual.value 
		// txt_PaginasTotal.value  
	}
	Proxima_Click = function() 
	{ 
		divModalMensagem.setMessage( "Proxima", "sf" );
		divModalMensagem.Show();
		// txt_irParaPagina.value 
		// txt_PaginaAtual.value 
		// txt_PaginasTotal.value  
	}
	Ultima_Click = function() 
	{ 
		divModalMensagem.setMessage( "Ultimo", "sf" );
		divModalMensagem.Show();
		// txt_irParaPagina.value 
		// txt_PaginaAtual.value 
		// txt_PaginasTotal.value  
	}


	testeModal_Click = function() 
	{ 
		divModalMensagem.setMessage( "meu texto de teste", "sf" );
		divModalMensagem.Show();
		// txt_irParaPagina.value 
		// txt_PaginaAtual.value 
		// txt_PaginasTotal.value  
	}

	tabelaSelecionar = function( str ) 
	{
		divTop.innerHTML = str ; 
		// txt_irParaPagina.value 
		// txt_PaginaAtual.value 
		// txt_PaginasTotal.value    

		//divModalMensagem.setMessage( str, "sf" ); 
		//divModalMensagem.Show(); 

		//alert(str); 
	}



	></script>
	<body style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt;" onload="loadPage()"  >
	</body>

</html>
#2

Legal, lembrou um formulario em Access ou ateh mesmo Delphi hehe.

Massssss, nao eh muito trabalho nao? Um JQuery + JQueryUI + Bootstrap nao daria conta do recado com mais facilidade?

#3

[quote=fredferrao]Legal, lembrou um formulario em Access ou ateh mesmo Delphi hehe.

Massssss, nao eh muito trabalho nao? Um JQuery + JQueryUI + Bootstrap nao daria conta do recado com mais facilidade?[/quote]

Não dá tanto trabalho assim. Fiz esse código em 2 dias. Depois que eu trabalhei com ExtJs incuti que é melhor eu mesmo fazer o front-end na unha. Desta forma o código fica pequeno e eu mesmo posso alterá-lo (mantendo o padrão w3c).
Eu levei quase mês para aprender ExtJS e as vezes precisava recorrer aos fóruns.
Tenho notado que com crescimento das curvas de aprendizado das ferramentas atuais, torna-se mais fácil se fizermos nossos próprios componentes e ferramentas. você perde menos tempo, considerando o tempo do aprendizado e da manutenção.
Mesmo que 2 dias fossem considerados muito tempo, penso que com menos de 2000 linhas de código eu compenso no tempo de qualquer manutenção ou implementação.

Meu objetivo agora é saber o que preciso pra fazer funcionar em mobiles com touchscreen.
Acredito que com algumas modificações eu possa fazer isso nesse código.

#4

[quote=Luiz Augusto Prado][quote=fredferrao]Legal, lembrou um formulario em Access ou ateh mesmo Delphi hehe.

Massssss, nao eh muito trabalho nao? Um JQuery + JQueryUI + Bootstrap nao daria conta do recado com mais facilidade?[/quote]

Não dá tanto trabalho assim. Fiz esse código em 2 dias. Depois que eu trabalhei com ExtJs incuti que é melhor eu mesmo fazer o front-end na unha. Desta forma o código fica pequeno e eu mesmo posso alterá-lo (mantendo o padrão w3c).
Eu levei quase mês para aprender ExtJS e as vezes precisava recorrer aos fóruns.
Tenho notado que com crescimento das curvas de aprendizado das ferramentas atuais, torna-se mais fácil se fizermos nossos próprios componentes e ferramentas. você perde menos tempo, considerando o tempo do aprendizado e da manutenção.
Mesmo que 2 dias fossem considerados muito tempo, penso que com menos de 2000 linhas de código eu compenso no tempo de qualquer manutenção ou implementação.

Meu objetivo agora é saber o que preciso pra fazer funcionar em mobiles com touchscreen.
Acredito que com algumas modificações eu possa fazer isso nesse código.
[/quote]

Olá. Te mandei mp sobre os eventos touch. Qualquer dúvida, me mande uma mensagem.
[]'s

#5

[quote=Erick Ribeiro]
Olá. Te mandei mp sobre os eventos touch. Qualquer dúvida, me mande uma mensagem.
[]'s[/quote]

não to conseguindo acessar seu site.

#6