Another teacher’s website

  http://bit.ly/9t1FWM copy to clipboard + http://bit.ly/9t1FWM RSS

Pagination « à la Facebook »

Pagination « à la Facebook »

avec le crière {ajax} sur un <INCLURE>

par SteF, le 13 octobre 2009 (maj 13 février 2010) BY-SA
1 commentaire

Donnez votre avis
4 votes

Sur ce site, en page d’accueil, sont affichés les 5 derniers billets.

SPIP propose un système de pagination qui marche très bien, mais je voulais faire une présentation « à la Facebook » qui permette d’ajouter en dessous des publications plus anciennes sans recharger toute la page.

Et c’était l’occasion d’essayer d’utiliser le critère {ajax} qui permet exactement ceci lors de l’appel d’une inclusion.

Je me suis fié à la doc, qui comme d’habitude est très claire et très précise.

Lien
- ajax pour les inclure sur spip.net

Voici comment j’ai procédé : sur mon squelette sommaire.html, la boucle qui affiche les 5 derniers articles se présente ainsi :

J’ai tout d’abord déplacé cette boucle sur un squelette inclus inc-recentposts.html

Sur sommaire.html, le squelette est inclus avec

<INCLURE{fond=inc-recentposts}{env}{nb=#ENV{nb,5}}{ajax}>

La variable {nb} sert à donner le nombre d’articles à afficher, par défaut égal à 5, le critère {ajax} indique que seul le fichier inclus devra être rafraîchi lorsqu’on clique un lien portant la classe ajax.

Dans le fichier inclus, le critère d’itération de la boucle principale doit donc être modifié pour afficher les nb premiers articles et non les 5 premiers.

Au bas de la boucle, j’ajoute un lien ajaxé qui déclenche le rafraîchissement du squelette inclus en incrémentant nb de 5.

A ce stade ça fonctionne, mais au moment du rafraichissement le focus revient sur le haut du fichier inclus. Pour plus de lisibilité, il vaut mieux que la page reste où elle est.

J’ai donc utilisé une ancre, nommée #more, placée sur le dernier élément affiché avant ajout, soit le nb-5ème post.

Pour ajouter cette ancre, l’affichage du détail des posts devient :

L’appel ajaxé des billets supplémentaires devient donc :

Et voilà, ça marche !

Retour en haut de la page

9/11 Sommaire de la rubrique Précédent Suivant

Conditions d'utilisation

Le billet ci-dessus « Pagination « a la Facebook » » par Stephane Busuttil, ainsi que — sauf mentions spécifiques — tous les documents accessibles sur cette page sont librement mis à disposition selon les termes de la licence Creative Commons Paternité - Partage des Conditions Initiales à l'Identique 3.0 Unported.

+ de détails

Votre avis sur cette page

4 votes

1 commentaire

  • JR, le 15 octobre 2009 à 12:48

    Excellent !


Vos réactions

Laissez ci-dessous vos commentaires, précisions, remarques et questions. Vos contributions ne s'affichent publiquement qu'après validation, trop de spam sinon.

Commenter
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)

    texte
Qui êtes-vous ?

Retour en haut de la page

SPIP

SPIP est un logiciel unique, merveilleux et irremplaçable. Dans cette rubrique, quelques modestes contributions.

10 autres articles dans cette rubrique

Morceaux choisis


Contribuez à maintenir ces pages sur la toile.
Paiement sécurisé par Paypal ou CB

Frais d'hébergement depuis 2009 : 230 €
Total des dons depuis 2009 : 99 €

Another Teacher's Website est motorisé par SPIP.

Contribuez au contenu de ce site