Carregar página em DIV com jQuery

ZUCOLLI · Março 5, 2011

Boa noite galera...

Alguém pode me passar uma explicação simples de como carregar páginas em DIVs de uma forma simple...

Ou até mesmo algum tópico do fórum, não achei nenhum que me clareou a idéia.

EXPLICAÇÂO:

Terei a index.html e nela uma DIV conteudo onde ao clicar nos links (HOME, SERVICOS, etc) as respectivas páginas serão carregadas nesta DIV.

Estou tentando fazer deste jeito, com JQuery porque faço do método tradicional e acho que já está ficando desatualizado.

Desde já agradeço

ZUCOLLI

Francispansa · Março 5, 2011

Alguém pode me passar uma explicação simples de como carregar páginas em DIVs de uma forma simple...

ZUCOLLI, pra fazer isso você pode usar o load do jQuery, http://api.jquery.com/load/..

Abrass

Dii · Março 10, 2011

É o seguinte, farei um esquema simples de como você deve fazer para carregar esses conteúdos sem precisar atualizar a página com PHP e AJAX.

index.php

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
// Executa o evento CLICK em todos os links do menu
$('#menu a').live('click',function(){
 // Faz o carregamento da página de acordo com o COD da página, que vai pegar os valores da página page.php.
 $('#conteudo').load($(this).attr('href'));
 return false;

});

});
</script>
</head>
<body>
<div id='menu'>
<ul>
<li><a href='page.php?cod=1'>Home</a></li>
<li><a href='page.php?cod=2'>Serviços</a></li>
</ul>
</div>
<!-- Aqui serão mostrados os conteúdos -->
<div id='conteudo'>

</div>
</body>
</html>

Agora vou mostrar como pegar os valores utilizando PHP.

page.php

<?php
// Aqui ele pega o valor da varíavel do navegador.
$cod = $_GET['cod'];
// A condição switch faz com que o valor dos códigos do primeiro script represente uma página html que carregará na div conteudo.
switch($cod){
case '1'; // Aqui por exemplo, lá é page.php?cod=1, certo? Então ela vai carregar a página home.html na div conteúdo.
include('home.html');
break;
case '2'; // Aqui tambem, lá é page.php?cod=2, então ela carregará a página de noticias.html.
include('noticias.html');
}

?>

Bom, tentei exemplificar ao máximo possível para que você entenda, obrigado.

PS: Caso queira adicionar mais coisas, é só por um break; e mais cases. Até mais

ZUCOLLI · Março 10, 2011

Dii acho que é isso...

Vou fazer e posto se deu certo.

Muito obrigado.

CARLOS

Dii · Março 11, 2011

Ok, aqui funcionou.

Qualquer dúvida sobre como funcione, poste aqui que eu te ajudo. =D

ericolvr · Março 28, 2011

Desculpe pela pergunta, sou péssimo com JS.

E se essas variaveis fossem passadas através de um <select>, qual seria o seletor do Jquery?

Dii · Março 29, 2011

Olha, eu fiz um aqui, sem utilizar a programação em PHP, mas que você poderá abrir páginas PHP com ele.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
// Define as variaveis de acordo com a quantidade da página // opcional.

$('#inicio').click(function(){
// Define a página que vai ser aberta, quando usuario clickar.
var pagina = "inicio.php";
	$('#conteudo').load(pagina);	

});

$('#registro').click(function(){
// Repetindo a variável pagina, que receberá a página registro.php, ele poderá ser modificado. Mesmo processo acima.
var pagina = "registro.php";	
	$('#conteudo').load(pagina);
});

});
</script>
</head>
<body>
<form id='form'>
<select>
<option id='inicio'>Página Principal</option>
   <option id='registro'>Registro</option>
</select>
</form>
<!-- Aqui o conteúdo será mostrado -->
<div id='conteudo'>

</div>
</body>
</html>

Isso ai funciona de acordo com que o usuário escolher. Se você quiser adicionar mais coisas, é so adicionar um novo <option> com um novo ID e adicionar lá no código, basicamente é so repetir os processos. Deixei os comentários, se você não entender, diga-me.

William Bruno · Março 29, 2011

@Dii, que tal assim:

<select name="paginas">
   <option value="inicio.php">Página Principal</option>
   <option value="registro.php">Registro</option>
</select>

e ai no jquery:

$("select[name='paginas']").change(function(){
   $('#conteudo').load( $( this ).val() );
});

e pronto. Se quiser mais, basta alterar o HTML, sem duplicar nada no jQuery.

Dii · Março 29, 2011

Opa! Valeu pela dica, eu nem havia pensado nisso rs.

brunoagne3 · Março 8, 2012

aqui funciona a troca de conteúdo do div, mas com erro de charset (UTF-8 e ISO-8859-1...)

quando na pagina a ser carregada tem acentos, aparece um monte de ??????, as minhas 2 paginas estao em iso-8859-1.

como resolvo isso? li na internet q o jquery troca para UTF-8... não sei o q fazer.

abaixo meu código:

arquivo: menu.js

//codigo para alterar o conteudo da DIV = CORPO

$("#menu_esquerda a").click(function()

{

/*decobre o ID do link foi clicado*/

var id = $(this).attr('id');

/*cria o link do artigo que será chamado*/

var link = 'artigos_css/artigo' + id + '.htm';

/*troca o conteudo do div*/

$("#corpo").load(link);

});

William Bruno · Março 8, 2012

Leia e entenda:

http://wbruno.com.br/2011/04/19/problemas-acentuacao-ajax-como-resolver/

brunoagne3 · Março 10, 2012

Leia e entenda:

http://wbruno.com.br/2011/04/19/problemas-acentuacao-ajax-como-resolver/

muito obrigado, mas tem um porém....

com excelente seu tutorial consegui assim um determinado DIV na pag1.html, carrega o arquivo pag2.php via Jquery (usando LOAD).

porém eu gostaria de saber se tem como fazer isso sem problemas de acentos se os 2 arquivos forem .HTML

até pq pra usar o LOAD do jquery não precisa de PHP.

isso é possível??

desde já agradeço toda a atenção.

turfeaugusto · Maio 30, 2014

gostaria de saber como faz esse recurso usado nesse forum onde passa o mouse por cima do nomedo usuario e abre uma janela de informaçoes dentro de uma div.vou avisando sou novo aqui hein...

William Bruno · Maio 30, 2014

@turfeaugusto, crie um novo tópico para sua dúvida.

E apenas respondendo rapidamente, vc deve pesquisar por dropdown

turfeaugusto · Maio 31, 2014

o eu nao consegui fazer um novo topico procurei e nao achei ...mais obrigado por sua atençao vou pesquisar

William Bruno · Maio 31, 2014

Aqui amigo:

http://forum.imasters.com.br/index.php?app=forums&module=post&section=post&do=new_post&f=6

basta postar.

rdpacato · Agosto 7, 2014

Pessoal, estou com o mesmo problema... só que estou em java... não consegui aplicar isso... não sei como carregar apenas o conteúdo e manter os dados das outras divs (checkbox) selecionados, para não dar refresh.

e também depois de pegar os valores do servlet retornar para essa div, sem carregar página, hoje ele está abrindo uma nova tela.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--[if lte IE 6]>
	<script type="text/javascript">alert("Sua versão de Browser está desatualizada");location.href='http://www.updateyourbrowser.net/pt'; </script>
<![endif]-->

<!--[if gte IE 7]>
	<script type="text/javascript">alert("Sua versão de Browser está desatualizada");location.href='http://www.updateyourbrowser.net/pt'; </script>
<![endif]-->

<!--[if gte IE 8]>
	<script type="text/javascript">alert("Sua versão de Browser está desatualizada");location.href='http://www.updateyourbrowser.net/pt'; </script>
<![endif]-->

<!--[if IE 9]>
	<script type="text/javascript">alert("Sua versão de Browser está desatualizada");location.href='http://www.updateyourbrowser.net/pt'; </script>
<![endif]-->  


<html>
	<head>
		<title> PGPM - Menu </title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
		<BASE href="home.html" target="principal">
		<link rel='stylesheet' type='text/css' href='css/buttonMenu.css'>  
		<link rel='stylesheet' type='text/css' href='css/padrao_VisualPED.css'>
		<link rel="stylesheet" href="css/jquery-ui.css" />
		
		<link rel="stylesheet" type="text/css" href="css/styles.css" />
		<script src="js/jquery-latest.min.js"></script>
		<script src="js/script.js"></script>
  		<script src="js/jquery-1.9.1.js"></script>
   		<script src="js/jquery-ui.js"></script>
   		
	</head>

<style>

html{overflow:auto;width:auto;}
body {background-color: #000; margin-top: 0px; margin-bottom: 0px;}

#container {margin-right: auto; margin-left: auto;}

#header {height: 100%; width:100%; background-color: #333}

#sidebar {position: relative; float: left;}

#mainContent {height: 100%; width: 100%; background-color: #999; float: right;}

#tituloPrincipal {position: relative; padding:5px; margin: 0; margin-center:100%; font-weight: bold; color:#444; text-align:center;}

#conteudoFiltro {width:auto; margin: 0 auto; margin-left:0}
#comboVeiculo {font-size:13px;}
#tituloAba {background:#0094ff; width:100px; height:25px;} 
.titulo {font-weight: bold; color:#FFF; text-align:center; padding-top:4px;}
#box {border:2px solid; border-color:#0094ff; width:320px; font-size: 13px;}
#posicao {padding:2px; position: relative; margin:0; display: block;} 
.posicao .esquerda {padding:2px; position:relative; float:left; margin:0; display: block;} 
.posicao .direita {padding:2px; position:relative; float:right; margin:0; display: block;} 
.posicao .clear {clear:both;margin:0;padding:0;} 

.ui-datepicker {font-size: 12px;}
.ui-datepicker td span, .ui-datepicker td a {display: inline-block;	font-weight: bold; text-align: center; width: 20px; height: 20px; line-height: 20px;}
.ui-datepicker-calendar .ui-state-default {color:#06F;}
.ui-datepicker-unselectable .ui-state-default {background: #f4f4f4;	color: #b4b3b3;}
.arrow_box-ca:after, .arrow_box-ca:before {bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.ui-datepicker-trigger {position: relative; top: 4px; padding: 2px; margin:0px;}
.ui-datepicker-calendar .ui-state-active {background: #06F; color: #fff; text-shadow: 0px 1px 0px #000;}
.ui-datepicker-calendar .ui-state-hover { background: #f7f7f7;}
</style>
	
	

<script type="text/javascript">
function envia_tranca() {
	document.forms['form1'].submit();
	document.forms['form1'].elements['pesquisaRel'].disabled = true;	
}


function CheckAllEquipamento() { 
   for (var i=0;i<document.formAll.elements.length;i++) {
     	var x = document.formAll.elements[i];
     	if (x.name == 'MultiplosDadosFiltro') { 
			x.checked = document.formAll.filtroALL.checked;
		} 
	} 
} 


$(function(){
    $('#dataIni').datepicker({
    	dateFormat: 'dd/mm/yy',
	    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
	    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
	    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
	    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
	    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
	    nextText: 'Próximo',
	    prevText: 'Anterior',
		showOtherMonths:true,
        selectOtherMonths: false,
		changeMonth:true,
        changeYear:true,
		showOn:"button",
        buttonImage: "./img/calendar_icon.png",
		buttonImageOnly: true,
    	onSelect: function(dateText, inst) {
	      $("input[name='dataIni']").val(dateText);
	    }
    });
});
			
$(function(){
    $('#dataFin').datepicker({
    	dateFormat: 'dd/mm/yy',
	    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
	    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
	    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
	    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
	    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
	    nextText: 'Próximo',
	    prevText: 'Anterior',
		showOtherMonths:true,
        selectOtherMonths: false,
		changeMonth:true,
        changeYear:true,
		showOn:"button",
		buttonImage: "./img/calendar_icon.png",
		buttonImageOnly: true,
    	onSelect: function(dateText, inst) {
	      $("input[name='dataFin']").val(dateText);
	    }
    });
});

function Formatadata(Campo, teclapres)
{
	var tecla = teclapres.keyCode;
	var vr = new String(Campo.value);
	vr = vr.replace("/", "");
	vr = vr.replace("/", "");
	vr = vr.replace("/", "");
	tam = vr.length + 1;
	if (tecla != 8 && tecla != 8)
	{
		if (tam > 0 && tam < 2)
			Campo.value = vr.substr(0, 2) ;
		if (tam > 2 && tam < 4)
			Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2);
		if (tam > 4 && tam < 7)
			Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4, 7);
	}
}


function dois_pontos(tempo){
      if(event.keyCode<48 || event.keyCode>57){
        event.returnValue=false;}
      if(tempo.value.length==2){
        tempo.value+=":";}
}

function valida_horas(tempo){
  while (tempo.value.length < 5){
      if(tempo.value.length==2 || tempo.value.length==5){
        tempo.value+=":";}
      tempo.value+="0";}

  horario = tempo.value.split(":");
  var horas = horario[0];
  var minutos = horario[1];
if(horas > 24){ //para relógio de 12 horas altere o valor aqui
  submit.disabled = true;relogio.focus();//fica nome_do_form.submit.disabled caso você insira um form ali em baixo 
  Break;} 
if(minutos > 59){
  submit.disabled = true;relogio.focus();
  Break;}
  submit.disabled = false;
}
	
	</script>
	
<script type="text/javascript">
function mostra() {
	document.getElementById('conteudo').style.display = 'block';
}
function esconde() {
	document.getElementById('conteudo').style.display = 'none';
}
</script>

	
<script type='text/javascript'> 
function abrefechaFiltro() {
	if(filtro.style.display == "none") {
		filtro.style.display = "block";
	} else {
		filtro.style.display = "none";
 	}
}

function abrefechaMenu() {
	if(menu.style.display == "none") {
		menu.style.display = "block";
	} else {
		menu.style.display = "none";
	}
}
 </script>	
	
<body>
<div id="container">

<a href="#" onmouseover="javascript:mostra();" onmouseout="esconde();">Teste</a>
	<div id="conteudo" style="display:none;">Conteudo do Menu</div>

	<div id="header"></div>

	<div id="logo"></div>

	<div id="mainContent">

	<div id="content"></div>

	<div id="dg"><a href="javascript:abrefechaFiltro()">Filtro Abre/Fecha</a></div><div id="filtro" style="display: none;">
		<div id="sidebar">
			<form name="formAll" action="ServletPGPM" method="post">
			<input type="hidden" id="msgRetornoFiltro" value="<c:out value="${msgRetornoFiltro}"/>"/>
			
		
			
			
			<div id="conteudoFiltro">
					
				<div>
					<div id="tituloAba">
						<p class="titulo">Filtros</p> 
					</div>
					<div id="box">
					<table cellspacing="5" cellpadding="2" align="center">
					<tr>
						<td>
							<div id="comboVeiculo">
								<select name="cod_igreja" class="selectbox" style="width:100px;">
									<option value="0">VEÍCULO</option>
										<c:forEach var="e" items="${veiculo}">
											<option value="${e.cod_estado}" <c:if test="${e.cod_estado == param.meuparametrodobanco}">Selected=selected</c:if>  > ${e.nom_estado}</option>
										</c:forEach>
								</select>	
							</div>
						</td>
					</tr>
						<tr align="left">	
							<td width="auto">	
								<div class="esquerda">	
									<div title="Data Inicial">Dt. Ini.: <input type="text" size="6" maxlength="10" id="dataIni" name="dataIni" onkeyup="Formatadata(this,event)"/></div>
									<br>
									<div title="Hora Inicial">Hr. Ini.: <input type="text" size="6" name="horaIni" maxlength="5" onkeypress="dois_pontos(this)" onBlur="valida_horas(this)"></div>
									<br>
									<div><INPUT TYPE=CHECKBOX id="filtroALL" onclick="CheckAllEquipamento()" name="filtroALL"><label for="filtroALL" class="" title="Selecionar todos os campos"> Selecionar tudo</label></div>
									<br>
									<div><INPUT TYPE=CHECKBOX id="VelocidadeInst" VALUE="VelocidadeInst" name="MultiplosDadosFiltro" class=""><label for="VelocidadeInst" class="" title="Velocidade Instantânea"> Vel. Instantânea</label></div>	
									<div><INPUT TYPE=CHECKBOX id="VelocidadeMd" VALUE="VelocidadeMd" name="MultiplosDadosFiltro" class=""><label for="VelocidadeMd" class="" title="Velocidade Média"> Vel. Média</label></div>
									<br>
									<div><INPUT TYPE=CHECKBOX id="PosAcel" VALUE="PosAcel" name="MultiplosDadosFiltro" class=""><label for="PosAcel" class="" title="Posição do Acelerador"> Pos. do Acelerador</label></div>
									<div><INPUT TYPE=CHECKBOX id="RotMotor" VALUE="RotMotor" name="MultiplosDadosFiltro" class=""><label for="RotMotor" class="" title="Rotação do Motor"> Rot. do Motor</label></div>
									<div><INPUT TYPE=CHECKBOX id="RotMaxMotor" VALUE="RotMaxMotor" name="MultiplosDadosFiltro" class=""><label for="RotMaxMotor" class="" title="Rotação Máxima do Motor"> Rot. Máx. do Motor</label></div>
								</div>	
							</td>
							<td width="auto">
								<div class="direita">		
									<div title="Data Final">Dt. Fin.: <input type="text" size="6" maxlength="10" id="dataFin" name="dataFin" onkeyup="Formatadata(this,event)"/></div>
									<br>
									<div title="Hora Final">Hr. Fin.: <input type="text" size="6" name="horaFin" maxlength="5" onkeypress="dois_pontos(this)" onBlur="valida_horas(this)"></div>
									<br>
									<div></div>
									<br>
									<div><INPUT TYPE=CHECKBOX id="NvlCombus" VALUE="NvlCombus" name="MultiplosDadosFiltro" class=""><label for="NvlCombus" class="" title="Nível de Combustível"> Nvl. de Combustível</label></div>
									<div><INPUT TYPE=CHECKBOX id="EficCombus" VALUE="EficCombus" name="MultiplosDadosFiltro" class=""><label for="EficCombus" class="" title="Eficiência do Combustível"> Efic. do Combustível</label></div>	
									<div><INPUT TYPE=CHECKBOX id="DistPerc" VALUE="DistPerc" name="MultiplosDadosFiltro" class=""><label for="DistPerc" class="" title="Distância Percorrida"> Dist. Percorrida</label></div>
									<br>
									<div><INPUT TYPE=CHECKBOX id="TempViagem" VALUE="TempViagem" name="MultiplosDadosFiltro" class=""><label for="TempViagem" class="" title="Tempo de Viagem"> T. de Viagem</label></div>
									<div><INPUT TYPE=CHECKBOX id="TempVeicParado" VALUE="TempVeicParado" name="MultiplosDadosFiltro" class=""><label for="TempVeicParado" class="" title="Tempo do Veículo Parado"> T. do Veíc. Parado</label></div>
									<div><INPUT TYPE=CHECKBOX id="TempVeicFunc" VALUE="TempVeicFunc" name="MultiplosDadosFiltro" class=""><label for="TempVeicFunc" class="" title="Tempo do Veículo Funcionamento"> T. do Veíc. Func.</label></div>
								</div>
							</td>	
						</tr>
					</table>
					<br>	
					<center>
						<div><input name="pesquisaRel" id="pesquisaRel" type="submit" value="Pesquisar"/></div>
					</center>
					<br>	
					<div class="clear"></div>	
					</div>  	
				</div>
			</div>

			</form> 
		</div>
		
	</div>
	
	
<div id="dg"><a href="javascript:abrefechaMenu()">Menu Abre/Fecha</a></div>
<div id="menu" style="display: none;">

<div id="nav">
				<!-- menu -->
				<ul>
					<li><a href="#" class="menu-option" id="home">Home</a></li>
					<li><a href="#" class="menu-option" id="perfilMotorista.jsp">Perfil Motorista</a></li>
					<li><a href="#" class="menu-option" id="page2">Page 2</a></li>
				</ul>
			</div>


</div>

	</div>
	

// RESULTADO DO SERVLET
			<c:if test="${MultiplosDadosAtuais2}">
		<table>
			<tr>
				<td class="consultado" style="visibility:hidden;">Consultado por <c:out value='${MultiplosDadosAtuais2 != null ? MultiplosDadosAtuais2 : "---"}'/></td>
			</tr>
		</table>
		</c:if>
	
</div>


</body>

</html>

Hodnan · Novembro 28, 2015

Estou com um problema semelhante.

tenho um template que já carrega os conteúdos em div via jquery e preciso carregar um segundo conteúdo dentro de uma pagina já carregada dentro de uma div, se rodo por for a funciona bem, mas quando carrego dentro da div já carregada...

Rodrigo Biaggio · Março 9, 2016

Senhores, e se eu tiver abas dinâmicas?

paikoala · Junho 18, 2016

Gelera me tira uma dulvida, no caso tenho uma das paginas a ser carregadas que tem um slide que é um menu de bandas, esse menu contem a href que carrega as informações da banda em um div abaixo do menu. tentei algumas tecnicas para carregar as informações dessas paginas nas divs como tem aqui nesse topico mas o slide para de funcionar. alguem sabe o porque?será que os codigos de js estão entrando em conflito?ou o erro é chamar esses codigos no index?

Arquivado

Carregar página em DIV com jQuery

Recommended Posts

ZUCOLLI 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Francispansa 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dii 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

ZUCOLLI 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dii 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

ericolvr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dii 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dii 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunoagne3 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunoagne3 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

turfeaugusto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

turfeaugusto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hodnan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rodrigo Biaggio 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

paikoala 0