Pages

vendredi 11 février 2011

My first jQuery Plugin

English version

jQuery.UnlimitedScroll.js est un plugin basé sur jQuery qui :
  • Créé une liste d’élément à partir d’un appel Ajax
  • Ajoute des lignes à la fin à chaque fois que le scroll arrive à la fin de la page
  • Ajoute un Timer qui insère des lignes en début de liste s’il y a nouvelles données
Petite demo :





Comment utiliser jQuery.unlimitedscroll :

Ajouter jQuery
<script src="jquery.min.js" type="text/javascript">
</script>
Quand l'event document ready est lancé, on attache un element au plugin
$(document).ready(function () {
    $("#myElement").unlimitedscroll('Ajax/MyDataService',
    function (data) { return MakeItem(data); },
    {
       timer: 60000,
       timerUrl: ‘Ajax/MyTimerDataService’,
       IndexFieldName: ‘date’
    });
});

Syntaxe
$(DomElem).unlimitedscroll (url, itemfunction, options)

  • Url : Url du service Ajax qui renvoie des données(JSon)
  • itemFunction: fonction qui est appelée pour composer les items
options :
  • pageSize: Nombre d'éléments lu à chaque fois (y compris dans le load initial (defaut= 15)
  • maxPages: Nombre de pages maximum (default : -1 => pas de limite)
  • IndexFieldName: nom du champ servant de référence pour déterminer s’il y a de nouvelles données à lire
  • timer: 0 : délai entre chaque appel (en milisecondes) (default 0 => pas de timer)
  • timerUrl: Url du service Ajax qui renvoie des données(JSon) appeler par le Timer, ce service doit prendre un paramètre ‘IndexFieldName’ qui sert de référence dans le temps
  • on_complete: Évènement lancé quand le chargement (initial & timer) est terminé
  • on_loading: Évènement lancé  avant le chargement (initial & timer)
  • on_loaded: Évènement lancé quand le chargement (initial & timer) est terminé
  • on_error: Évènement lancé quelque chose c'est mal passée

Créer la function qui produit les items à partir des données du service Ajax
function MakeItem(data) {return $("<div>"+data.myContent+"</div>");
}


Télécharger le Ici


Remerciements
Pour réaliser ce plugin, je suis parti de ce bon article d'initiation et pour le scroll, je me suis inspiré de celui-ci  
///

Aucun commentaire:

Enregistrer un commentaire