Tutorial de site em jQuery com refrescamento AJAX

Subscreva via ♥ ♥ Partilhe no ♥ ♥ ♥ ♥ Email

James Padolsey é um freelancer web developer de Hampton, UK. Ele escreve sobre front-end web development. O seu tópico preferido: Javascript. Este tutorial ensina-lhe a criar um layout assíncrono, levando o utilizador a interagir com a informação contida em várias páginas, sem haver refrescamento pelo browser.

Instalação

<!-- index.html -->
 
< !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">
<title>mmm... Ajax!</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
</meta></head>
<body>
    <div id="wrapper">
    <h1>ajax ... nettuts</h1>
    <ul id="nav">
        <li>welcome</li>
        <li>about</li>
        <li>portfolio</li>
        <li><a href="contact.html">contact</a></li>
        <li><a href="terms.html">terms</a></li>
    </ul>
    <div id="content">
        <h2>Welcome!</h2>
        <p>Text</p>
    </div>
    <div id="foot">Tutorial by James for NETTUTS</div>
</div>
</body>
</html>

<!-- js.js -->
 
$(document).ready(function() {
 
    // Check for hash value in URL
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }
    });
 
    $('#nav li a').click(function(){
 
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
    	$('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    	$('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
 
    });
});

Demonstração: Site em jQuery com Refrescamento AJAX
Download: Download Site em jQuery
Licença: Ver no site Nettuts

♥ ♥

ThemeForest publicou recentemente uma série de 15 vídeos tutoriais onde ensina a trabalhar com a livraria jQuery nos nossos projectos. As aulas abordam desde o download da framework, a criação da primeira função, como deve examinar a sintaxe, e muito mais. Em apenas 15 aulas você vai expandir os seus conhecimentos aprendendo com os melhores. [...]

♥ ♥

Quando se combina algumas funcionalidades de cortesia em PHP com a esperteza de jQuery você pode produzir resultados verdadeiramente bons. NETTUTS publicou um tutorial para criar um questionário dinâmico com PHP e jQuery. São realizado alguns efeitos Ajax da jQuery para eliminar a necessidade do refrescamento da página, para proporcionar uma pequena animação bastante interessante. Requisitos: [...]

Pedro Magalhães

Sobre o autor

User Interface Designer e Front End Developer. É autor do site Webgrafismo, onde dispõe novidades Open Source para Web Developers. Segue-o no twitter em @pedromagalhaes

Respostas a “Tutorial de site em jQuery com refrescamento AJAX”

Rui Ponte 26.10.2009 a 17:27
Pelo que vi no código, funciona com *.html, será que carrega ficheiros PHP?
Pedro Magalhães 26.10.2009 a 17:50
Funciona Rui, eu já experimentei…
Felipe Theossi 11.11.2009 a 17:26
Valew Pedro era exatamente isso que eu estava procurando para implementar em um freela…
Obrigado pela dica!
Pedro Magalhães 15.11.2009 a 3:15
:D Obrigado Felipe. É excelente este tut. Abraço