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.
-
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
[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (2/2)
[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (1/2)
[2 birthday] 2 ans aujourd'hui = 2 smashing book à gagner
[tuto web] cadre avec bordures extensibles valide xhtml/css
[tuto mashup] Google maps sur votre site : c'est possible! (version statique)
- Etre Rapide et Opportuniste 26 juillet 2010 Olivier Marone
- Confiance en soi et indifférence à l'échec 14 juillet 2010 Bertrand
- Le but du commandement n'est pas d'assurer le controle etroit - 11 juillet 2010 Bertrand
- Losqu'il s'agit d'agir en milieu complexe, la "logique 11 juillet 2010 Bertrand
- L’entreprise 1.0, 2.0 et 3.0 en un schéma 2 juillet 2010 Laurent ASSOUAD




![[3615 mylife] Limoges, c’est fini. La suite?](http://antoine.guiral.info/wp-content/uploads/2010/02/stvincent.jpg)
![[facebook] Du nouveau sur la roadmap](http://antoine.guiral.info/wp-content/uploads/2010/02/facebook_logo.png)
![[facebook php] hiphop for php : une petite révolution dans le monde du développement web et de php](http://antoine.guiral.info/wp-content/uploads/2010/02/hiphop.jpg)
![[apple iPad] énorme succés de l’iPad à la dernière keynote d’apple](http://antoine.guiral.info/wp-content/uploads/2010/01/ipad.jpg)
![[google] google, le 51ème état?](http://antoine.guiral.info/wp-content/uploads/2010/01/51emeetat.jpg)
Leave a Reply