lundi 14 février 2011

My first jQuery plugin

Version francaise

jQuery.UnlimitedScroll.js is a jQuery plugin which:
  • Creates a list item from an Ajax call
  • Add lines to the end whenever the scroll reaches the end of the page
  • Add a timer which inserts rows top of the list if new data is detected

demo :

How to use jQuery.unlimitedscroll :

Add jQuery
<script src="jquery.min.js" type="text/javascript">
In Ready event, call init of plugin
$(document).ready(function () {
     function (data) { return MakeItem(data); },
       timer: 60000,
       timerUrl: ‘Ajax/MyTimerDataService’,
       IndexFieldName: ‘date’

$(DomElem).unlimitedscroll (url, itemfunction, options)
  • Url : Url of Ajax service called for the first load it should return Data (JSon)
  • itemFunction: function called to made each element
options :
  • pageSize: Number of elements read each time (also in initial load) (defaut= 15)
  • maxPages: Max number of pages (default : -1 => no limit)
  • IndexFieldName: field name use for know if there is new data to read
  • timer: 0 : delay between each call (milisecondes) (default 0 => no timer)
  • timerUrl: Url of Ajax service called by timer, it must take ‘IndexFieldName’ parameters and it should return Data (JSon)
  • on_complete: event fired when load (initial & timer) is completed
  • on_loading: event fired just before load (initial & timer),
  • on_loaded: event fired just after load (initial & timer),
  • on_error: event fired if something wrong happen
Creates function which make the element contents (Data come from Ajax)
function MakeItem(data) {
    return $("<div>"+data.myContent+"</div>");

Download here

To realize this plugin, I started with this good article for beginners and for the scrolling part, I am inspired by this.

Aucun commentaire:

Enregistrer un commentaire