jquery plugin iscroll to achieve Drop-down refresh, scrolling effect _jquery

jquery Plugin: Iscroll

Page layout:

<div id= "wrapper" >
  <div id= "scroller" >
   <div id= "pulldown" >
    <span class= " Pulldownicon "></span><span class=" Pulldownlabel "> Dropdown refresh ...</span>
   </div>
   < UL id= "Thelist" >
    <li>
     
    </li>
    <li>
     
    </li>
    <li>
     
    </li>
    <li>
     
    </li>
    <li>
     
    </li>
    <li>
     
    </li>
   </ul>
   <div id=" Pullup ">
    <span class=" Pullupicon "></span><span class=" Pulluplabel "> Pull load more ...</span>
   </div>
  </ Div>

Paging, is through the AJAX request, the page number into the general handler, in the general handler to get the paging data returned to the JSON array object.

Drop-down refresh:

/**
  * Drop-down Refresh (custom implementation of this method)
  * Myscroll.refresh ();//////After data loading is complete, invoke interface Update method/
  function pulldownaction () {
   settimeout (function () { 
    var el, Li, I;
    el = document.getElementById (' thelist ');
    ==========================================
    $.ajax ({
     type: "Get",
     URL: "Loadmore.ashx",
     data : {page:generatedcount},
     DataType: "JSON",
     success:function (data) {
      var json = data;
      $ (JSON). each (function () {
       li = document.createelement (' li ');
       Li.innertext = ' generated row ' + (++generatedcount);
       li.innerhtml = '  ';
       El.insertbefore (Li, El.childnodes[0]);
      })
    ;
    Myscroll.refresh (); After data loading completes, invoke interface Update method  Remember to refresh when contents are loaded (ie:on ajax completion)
   }, 1000);  <--Simulate network congestion, remove settimeout from production!
  }

Pull up Refresh

function Pullupaction () {
   settimeout (function () {  
    var el, Li, I;
    el = document.getElementById (' thelist ');
    ==========================================
    $.ajax ({
     type: "Get",
     URL: "Loadmore.ashx",
     data: { Page:generatedcount},
     DataType: "JSON",
     success:function (data) {
      var json = data;
      $ (JSON). each (function () {
       li = document.createelement (' li ');  Li.innertext = ' generated row ' + (++generatedcount);
       li.innerhtml = ' ;     
       El.insertbefore (Li, El.childnodes[0]);
      })
    ;
    ============================================
    Myscroll.refresh ()/////After data loading is complete, invoke interface Update method Remember to refresh when Contents are loaded (ie:on ajax completion)
   }, 1000); <--Simulate network congestion, remove settimeout from production!
  }

Class

/** * Initialize Iscroll control/function loaded () {Pulldownel = document.getElementById (' pulldown ');
   Pulldownoffset = Pulldownel.offsetheight;
   Pullupel = document.getElementById (' Pullup ');
   Pullupoffset = Pullupel.offsetheight;  Myscroll = new Iscroll (' wrapper ', {scrollbarclass: ' Myscrollbar ',/* Important style * * Usetransition:false, Topoffset:  Pulldownoffset, Onrefresh:function () {if (PullDownEl.className.match (' loading ')) {Pulldownel.classname
      = '';
     Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' drop-down refresh ... ';
      else if (pullUpEl.className.match (' loading ')) {pullupel.classname = ';
     Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' pull loading more ... ' }, Onscrollmove:function () {if (This.y > 5 &&!pulldownel.classname.match (' Flip ')) {PU
      Lldownel.classname = ' Flip ';
      Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' Let go of the update ... ';
     this.minscrolly = 0; else if (This.y &Lt
      5 && pullDownEl.className.match (' Flip ')) {pulldownel.classname = ';
      Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' drop-down refresh ... ';
     this.minscrolly =-pulldownoffset; else if (This.y < (this.maxscrolly-5) &&!pullupel.classname.match (' Flip ')) {pullupel.classname = ' F
      Lip ';
      Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' Let go of the update ... ';
     this.maxscrolly = this.maxscrolly; 
      else if (This.y > (this.maxscrolly + 5) && pullUpEl.className.match (' Flip ')) {pullupel.classname = ';
      Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' pull loading more ... '
     this.maxscrolly = Pullupoffset; }, Onscrollend:function () {if (PullDownEl.className.match (' Flip ')) {pulldownel.classname = ' Loadi
      Ng ';
      Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' loading ... '; Pulldownaction ();
     Execute Custom Function (Ajax call?)
else if (pullUpEl.className.match (' Flip ')) {      Pullupel.classname = ' loading ';
      Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' loading ... '; Pullupaction ();
     Execute Custom Function (Ajax call?)
   }
    }
   });
  settimeout (function () {document.getElementById (' wrapper '). Style.left = ' 0 ';}, 800);
  ///Initialize the bound iscroll control Document.addeventlistener (' Touchmove ', function (e) {E.preventdefault ();}, False); Document.addeventlistener (' domcontentloaded ', Loaded, false);