Ca y est, il arrive. Le tutoriel sur la navigation en ajax non-intrusif débarque sur vos écrans! Le but est donc de proposer une navigation en ajax (on ne rechergera que le contenu de la page) qui soit non-intrusive. Cela veut dire que si le javascript n’est pas activé le site fonctionnera toujours. Un petit exemple :-)

Nous allons commencer par faire notre site de manière classique, celle qui sera affichée quand le javascript sera désactivé. Afin de factoriser le code je vais utiliser du php pour afficher le contenu, mais le fonctionnement serait le même en utilisant différent fichiers.

  • Le XHTML

Notre fichier html portera l’extension .php parce que nous allons utiliser le même fichier de base (index.php). Grâce au php nous allons factoriser le code. Cela complique un poil le tuto mais qui peut le plus peut le moins! Donc nous aurons un titre une liste, pour les articles, imbriquée dans une liste pour les pages.

  1.  
  4.  
  5. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  6. <link rel=”stylesheet” type=”text/css” href=”style.css” media=”all”/>
  7. </head>
  9. <h1>Tuto navig ajax non-intrusif</h1>
  10.  
  11.  
  12. Pour tester pleinement ce tuto, testez la navigation puis désactivez le javascript et testez la à nouveau
  13. <div id=”menu”>
  16. <a href=”index.php?page=1″>page 1</a>
  17. </li>
  19. <a href=”index.php?page=2″>page 2</a>
  20. </li>
  22. <a href=”index.php?page=3″>page 3</a>
  25. <a href=”index.php?page=3&#038;article=1″>article 1</a>
  26. </li>
  28. <a href=”index.php?page=3&#038;article=2″>article 2</a>
  29. </li>
  30. </ul>
  31. </li>
  32. </ul>
  33. </div>
  34. <div id=”contenu”>
  35. <?php
  36. //ici nous appelons notre fichier page.php qui affichera nos pages/articles
  37. include(’page.php’);
  38. ?>
  39. </div>
  40.  
  41. </body>
  42. </html>

  • Le php

Rien de très tordu ici : je récupère le numéro de la page que je veux afficher et le numéro de l’article le cas échéant et je l’affiche. Plus d’explications dans les commentaires du code du fichier page.php ;-)

  1.  
  2. <?php
  3.  
  4. //j’affecte une chaine nulle si mes variables ne sont pas utilisées afin d’éviter les warnings
  5. if(!isset($_REQUEST['page'])){
  6. $_REQUEST['page']=”;
  7. }
  8. if(!isset($_REQUEST['article'])){
  9. $_REQUEST['article']=”;
  10. }
  11.  
  12. //Ici j’effectue mes traitements suivant les cas, d’où la structure switch/case
  13. switch($_REQUEST['page']){
  14. //cas ou je veux afficher la page 1
  15. case 1:
  16. //ici on pourrais très bien faire un include d’un autre fichier
  17. echo’
  18.  
  19. Ma page 1
  20.  
  21. ’;
  22. break;
  23. //idem
  24. case 2:
  25. echo’
  26.  
  27. Ma page 2
  28.  
  29. ’;
  30. break;
  31. //idem avec un deuxième switch imbriqué pour les articles
  32. case 3:
  33. echo’
  34.  
  35. Ma page 3
  36.  
  37. ’;
  38. switch($_REQUEST['article']){
  39. case 1:
  40. echo’
  41.  
  42. Mon article 1
  43.  
  44. ’;
  45. break;
  46. case 2:
  47. echo’
  48.  
  49. Mon article 2
  50.  
  51. ’;
  52. break;
  53. }
  54. break;
  55. //dans le cas ou la variable $_REQUEST['page'] ne correspondent à aucun des cas
  56. default:
  57. echo’
  58.  
  59. Ma page par defaut
  60.  
  61. ’;
  62. break;
  63. }
  64.  

Normalement ça devrait marcher! Mais ce n’est pas très beau…

  • Le CSS

Un rapide fichier de styles pour avoir quelque chose de moins brut.

  1.  
  2. h1{
  3. text-align:center;
  4. }
  5. #menu{
  6. border:1px solid black;
  7. width:180px;
  8. float:left
  9. }
  10. #menu ul{
  11. list-style:none;
  12. }
  13. #contenu{
  14. width:800px;
  15. margin-left:200px
  16. }

Hop là! Un titre centré, un coup d’anti-puces (facile celle là…) et un menu qui flotte à gauche du contenu.

La prochaine fois nous grefferons nos scripts jQuery afin de transformer la navigation actuelle en une belle navigation en ajax.

[edit] La suite est ici :-D

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 :