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

  1.  
  2.  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.         <!-- les deux lignes du dessous -->
  5.     <script type="text/javascript" src="jquery.js"></script>
  6.     <script type="text/javascript" src="script.js"></script>   
  7. <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
  8. </head>
  9.  

La transformation des liens

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

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

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.

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

L’ “ajaxification” des liens

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

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

Le script final :

  1.  
  2. $(document).ready(
  3.     //construction du menu
  4.     function()
  5.     {
  6.         //pour chaque lien contenu dans un élément de liste
  7.         $('li>a').each(function() {
  8.             //on récupere le contenu de l'attribut href
  9.             var link=$(this).attr("href");
  10.             //et on remplace le index par page pour obtenir un lien : page.php?page=x&#038;article=x
  11.         $(this).attr("href",link.replace("index","page"));
  12.       });
  13.  
  14.         //à chaque clic sur un lien contenu dans un élément de liste
  15.         $('li>a').click(function() {
  16.             //on récupère l'attribut href
  17.             var link=$(this).attr("href");
  18.             //et on charge le document avec load dans le div d'id contenu
  19.         $("#contenu").load(link);
  20.             return false;
  21.       });
  22.     }
  23. )
  24.  

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 ;-)

Partagez cet article :
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • co.mments
  • De.lirio.us
  • Live
  • Ma.gnolia
  • Pownce
  • Scoopeo
  • Technorati
  • TwitThis
  • Wikio FR
  • e-mail
  • Wikio

Autres articles intéressants :

Articles les plus actifs :