WEB-d

Développement Web : PHP, (x)HTML, Javascript, Mootools, CSS, SEO, CMS, e-commerce, Linux, Ubuntu, ...

Charger la suite de la page avec Mootools ScrollSpy

Posté le jeudi 16 février 2012 | Catégories : Javascript, (x)HTML, Mootools

commentaires

Un des effets intéressants de Facebook est le fait de charger automatiquement les histoires suivantes lorsque l'utilisateur arrive en bas de la page. Il est possible d'obtenir le même effet grâce à Mootools et ScrollSpy.

Dans le code HTML de la page, il suffit d'inclure mootools-core et scrollspy. Il faut aussi prévoir un conteneur (div id="container" dans l'exemple ci-dessous) dans lequel on viendra insérer le contenu supplémentaire:


<head>
  <script type="text/javascript" src="mootools-core.js"></script>
  <script type="text/javascript" src="ScrollSpy-yui-compressed.js"></script>
</head>

<body>
  <div id="container">
    <h2>Page 1</h2>
    <p>Lorem ipsum...</p>
  </div>
</body>
 

La classe ScrollSpy comporte plusieurs options. Celles qui nous intéressent sont "min" et "max". Elles définissent une zone. Lorsque l'utilisateur entre dans cette zone, l’évènement "onEnter" est déclenché.

Dans l'exemple ci-dessous, cette zone commence à 100px du bas de la page et s'étend jusqu'en bas. Lorsque l'utilisateur entre dans cette zone, on exécute la requête AJAX "request".

Cette "request" est une requête AJAX classique (GET ?page=2). Le code html renvoyé par le serveur sera ajouté à la fin de notre div id="container" (paramètre append). Lorsque la requête AJAX est terminée (onComplete), on va également incrémenter la variable "page", pour que la prochaine requête AJAX aille chercher la page suivante, et on va mettre à jour les paramètres min et max du ScrollSpy car la taille de la page a changé à cause du nouveau contenu.


window.addEvent('domready',function() {
  var page = 2;

  var spy = new ScrollSpy({
    min: window.getScrollSize().y - window.getSize().y - 100,
    max: window.getScrollSize().y - window.getSize().y,
    onEnter: function() {
      request.get({'page': page});
    }
  });

  var request = new Request.HTML({
    append: 'container',
    onComplete: function(){
      page += 1;
      spy.options.min = window.getScrollSize().y - window.getSize().y - 100;
      spy.max = window.getScrollSize().y - window.getSize().y;
    }
  });
});

Finalement, il reste à créer le code PHP qui va générer le contenu demandé. En voici un exemple:


if (isset($_SERVER["HTTP_X_REQUESTED_WITH"])
  AND $_SERVER["HTTP_X_REQUESTED_WITH"]== "XMLHttpRequest") {

  echo "<h2>Page {$_GET['page']}</h2>" .
    "<p>Lorem ipsum...</p>" .
    "<p>Lorem ipsum...</p>";

  exit();
}
 

Attention qu'avec cette technique, le pied de la page ne sera plus visible (sauf si l'utilisateur atteint la dernière page). Il faudra donc peut-être adapter le layout de la page...

Commentaires

Articles similaires