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

avril 20th, 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.

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.

<h1>Tuto navig ajax non-intrusif</h1>
Pour tester pleinement ce tuto, testez la navigation puis désactivez le javascript et testez la à nouveau
<div id="”menu”">
<ul>
<li>
<a href="”index.php?page=1″">page 1</a></li>
<li>
<a href="”index.php?page=2″">page 2</a></li>
<li>
<a href="”index.php?page=3″">page 3</a>
<ul>
<li>
<a href="”index.php?page=3&article=1″">article 1</a></li>
<li>
<a href="”index.php?page=3&article=2″">article 2</a></li>
</ul>
</li>
</ul>
</div>
<div id="”contenu”"></div>

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

Normalement ça devrait marcher! Mais ce n'est pas très beau...
<ul>
<li>
<h2>Le CSS</h2>
</li>
</ul>
Un rapide fichier de styles pour avoir quelque chose de moins brut.
<pre lang="css">h1{
text-align:center;
}
#menu{
border:1px solid black;
width:180px;
float:left
}
#menu ul{
list-style:none;
}
#contenu{
width:800px;
margin-left:200px
}

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

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