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à.
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
User Responses
One Response and Counting...
Leave a Reply
[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)
- 7 Tools You Should Be Using For Better Web Designs 4 février 2010 Jacob Gube
- Link Underlines Grow to Backgrounds on Hover 4 février 2010 Chris Coyier
- [facebook] Du nouveau sur la roadmap 3 février 2010 Antoine
- Jive 3 février 2010 Stéphane
- [facebook php] hiphop for php : une petite révolution dans le monde du développement web et de php 3 février 2010 Antoine




![[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)
mai 02, 2008
Merci pour ce tuto. C’est exactement ce que je cherchais !