Les techniques dites AJAX permettent à une page HTML, déjà chargée dans le navigateur, d’aller chercher sur le même site un fragment de HTML et de l’insérer quelque part. jQuery possède tout ce qu’il faut pour faire cela.
Ici, nous allons employer $.get(), qui charge une URL et, une fois l’URL chargée, appelle une fonction en lui passant le contenu chargé.
Notre fonction prendra donc le contenu en question (variable c), transformera les symboles < en < — c.replace(/</mg,'<') —, et insérera le résultat dans une <div/> prévue à cet effet et qu’on a nommée <div id="code"></div>.
$.get(this.href,
function (c) {
$("#code")
.html(c.replace(/</mg,'<'));
}
);Les URLs clicables sont données, dans la page, par des liens portant la classe .load :
<a href="404" class="load">404</a> Dès que la page est prête, on affecte aux liens ayant la classe .load une fonction qui s’active lorsqu’on les clique (avec un return false; qui indique qu’il ne faut pas que le navigateur suivre le lien... et quitte notre page) :
$(document).ready(function() {
$("a.load").click(function() {
$.get(this.href,
function (c) {
$("#code")
.html(c.replace(/</mg,'<'));
}
);
return false;
});
});On ajoute ensuite deux effets graphiques : le premier masque la div #code dès qu’on clique — $("#code").hide() —, le second la révèle doucement après chargement du contenu — .fadeIn("slow") :
$(document).ready(function() {
$("a.load").click(function() {
$("#code").hide();
$.get(this.href,
function (c) {
$("#code")
.html(c.replace(/</mg,'<'))
.fadeIn('slow');
}
);
return false;
});
});Reste à ajouter un poil de CSS sur la div qui va afficher notre code, et le tour est joué.
RSS 2.0
Plan du site
Espace privé