Inserção de conteúdo sem recarregamento da página
Categoria - Desenvolvimento, Javascript, jQuery - Por - Felipe Gustavo de Lima No Comments »
Simples tutorial, ensinando a inserir conteúdo de modo assíncrono sem que ocorra recarregamento no restante da página.
Para isso usaremos a biblioteca javascript jQuery.
O jQuery tem suporte cross-browser, CSS 1 - 3 e o básico de Xpath.
Download e documentação no site oficial:
http://jquery.com
Exemplo:
<!-- Importa a Biblioteca do jQuery --> <script src="http://www.qosmio.com.br/wp-admin/lib/jquery-1.2.3.js" type="text/javascript"><!--mce:0--></script> <!-- Importa a nossa função --> <script src="http://www.qosmio.com.br/wp-admin/lib/centralcontent.js" type="text/javascript"><!--mce:1--></script> <!--[If lte IE 7]> <link type="text/css" href="css/ie.css" mce_href="http://www.qosmio.com.br/wp-admin/css/ie.css" rel="stylesheet" /> <![endif]--> <div id="page"> <div id="back"> <a title="Voltar ao anúncio"><< |</a></div> <div id="menu"> <ul> <li> <a id="content1" title="Home" href="#">Home</a></li> <li> <a id="content2" title="A Empresa" href="#">A Empresa</a></li> <li> <a id="content3" title="Portfólio" href="#">Portfólio</a></li> <li> <a id="content4" title="Quem Somos" href="#">Quem Somos</a></li> <li> <a id="content5" title="Fale Conosco" href="#">Fale Conosco</a></li> </ul> </div> <div id="content"> < p>Exemplo de inserção de conteúdo sem carregar a página<!-- p--></div> </div>
// Cria a variável mostrar // A Qual receberá os seguintes parâmetros // (url, conteudo, tempo, iniciar e show) var mostrar = { $url:'', $conteudo:'', $tempo:'', //Iniciar recebe a nossa função iniciar: function() { // Nossa função sera executada quando // quando houver um click no bloco $('div#menu a').click(function(){ // Variável url recebe o atributo id // do link do menu que for clicado //e concatena com a extensão html mostrar.$url = $(this).attr('id')+'.html'; // Variável conteudo define onde será // exibido o bloco com o conteudo mostrar.$conteudo = $('div#content'); // Variável conteudo recebe a tag img // E a escreve dentro do bloco do conteúdo mostrar.$conteudo.html ('< img src="./img/ajax-loader.gif" />'); // Define o tempo para exibição do conteúdo // Que foi definido para 2 segundos mostrar.$tempo = setTimeout('mostrar.show()', 2000); }); }, // Cria a função para leitura do arquivo html show:function() { // Criamos o diretório includes e colocamos os //arquivos neste diretório mostrar.$conteudo.load('./includes/'+mostrar.$url) // Limpa o timeout clearTimeout(mostrar.$tempo); } } // Iniciamos a função $(function(){ mostrar.iniciar(); })
* {margin:0;padding:0;text-decoration:none; font-family:Georgia, Times, Times New Roman, serif;} #page{width:700px;border:1px solid red;float:left;margin-left:20%;} #back { opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; background-color:blue;width:6%;height:5%; line-height:1.8;float:right;margin:10px;padding:2px; } #menu{width:15%;padding:10px 0px 0px 10px; float:left;margin:10px;border:1px solid green;} #content{border:1px solid yellow;width:70%;float:left;} p{padding:10px;} bdo{font-variant:small-caps; color:red;font-weight:bold;font-size:25px;} span{font-weight:bold;margin:33%;} ul li{list-style:none;} a:link{color:#000;} a:visited{color:#FF00FF;} a:hover{text-decoration:underline overline;color:#CCC;} a:active{color:#00FFFF;}
/* Margin Left in ie 6 */ #page{margin-left:10%;}


Recent Comments