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

mai 2nd, 2008 JS Antoine

Salut! Si tu veux suivre l'actualité de ce blog plus facilement, tu peux t'abonner gratuitement à son flux RSS. Ainsi tu seras mis au courant automatiquement des mises à jour.

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à.

<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>

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

Visit Website

Antoine

Passionné du web et de tout ce qui s'en rapproche, je tiens se blog sans prétentions pour vous faire partager mes découverte et mes interrogations sur le développement, le management, l'agilité, la gestion de projet.

Did you enjoy this post?

If so, would you please consider sharing it with the world