Antoine Guiral : apprenti du web 2.0 : [tuto jQuery] navigation en ajax non-intrusif (2/2)

[tuto jQuery] navigation en ajax non-intrusif (2/2)

Ecrit par Antoine le 2 mai 2008

Vous l’attendiez avec impatience, la voila! La fin du tutoriel pour faire une navigation ajaxifiée tout en restant accessible. Un petit point sur ce que l’on a déjà fait :

La partie php qui va chercher le bon article en fonction des paramètres
Notre squelette XHTML
un peu d’habillage CSS

Nous allons maintenant jQueriser notre document. Cette transformation va se présenter en trois parties.

Appeler nos script

Il faut modifier notre squelette xhtml afin de lier nos scripts à notre page. Cela se passe entre les balises head. Il faut préalablement télécharger jQuery si vous ne l’avez pas déjà.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>

La transformation des liens

En premier lieu nous allons modifier tous nos liens. En effet ils se présentaient sous cette forme :

<a href="index.php?page=1">page 1</a>

Or, si nous les gardons sous cette forme notre page va s’afficher “en cascade” puisque nous afficherions dans notre div “contenu” notre index.php.

//pour chaque lien contenu dans un élément de liste
$('li>a').each(function() {
//on récupere le contenu de l'attribut href
var link=$(this).attr("href");
//et on remplace le index par page pour obtenir un lien : page.php?page=x&article=x
$(this).attr("href",link.replace("index","page"));
});

L’ “ajaxification” des liens

Maintenant il faut faire appel à la méthode load de jquery pour charger notre article dans le div “contenu”.

//à chaque clic sur un lien contenu dans un élément de liste
$('li>a').click(function() {
//on récupère l'attribut href
var link=$(this).attr("href");
//et on charge le document avec load dans le div d'id contenu
$("#contenu").load(link);
return false;
});

Le script final :

$(document).ready(
//construction du menu
function()
{
//pour chaque lien contenu dans un élément de liste
$('li>a').each(function() {
//on récupere le contenu de l'attribut href
var link=$(this).attr("href");
//et on remplace le index par page pour obtenir un lien : page.php?page=x&article=x
$(this).attr("href",link.replace("index","page"));
});
//à chaque clic sur un lien contenu dans un élément de liste
$('li>a').click(function() {
//on récupère l'attribut href
var link=$(this).attr("href");
//et on charge le document avec load dans le div d'id contenu
$("#contenu").load(link);
return false;
});
}
)

Voilà, vous devriez avoir un menu parfaitement fonctionnel. Vous pouvez modifiez votre fichier page.php pour faire des includes de vos fichiers dans les switchs plutôt que d’écrire votre texte en dur.

Montrez nous vos réalisations et n’hésiter pas à faire des remarques, poser des questions, etc