JQuery plug-in iScroll implements drop-down refresh and scrolling pages.

JQuery Plugin: iScroll

Page Layout:

<Div id = "wrapper"> <div id = "scroller"> <div id = "pullDown"> <span class = "pullDownIcon"> </span> <span class = "pullDownLabel"> pull down to refresh... </span> </div> <ul id = "thelist"> <li>  </li>  </li>  </li>  </li>  </li>  </li> </ul> <div id = "pullUp"> <span class = "pullUpIcon"> </span> <span class = "pullUpLabel"> pull and load more more... </span> </div>

Page turning is to pass the page number to the general Handler through ajax requests. The paging data obtained in the general handler is returned as a json array object.

Pull-down Refresh:

/*** Pull-down refresh (custom implementation of this method) * myScroll. refresh (); // call the 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. c ReateElement ('lil'); // li. innerText = 'generated row' + (++ generatedCount); li. innerHTML = ''; el. insertBefore (li, el. childNodes [0]) ;}}}); myScroll. refresh (); // after the data is loaded, call the interface update method Remember to refresh when contents are loaded (ie: on ajax completion)}, 1000 ); // <-- Simulate network congestion, remove setTimeout from production! }

Pull up and 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 ('lil'); // li. innerText = 'generated row' + (++ Generated Count); li. innerHTML = '; el. insertBefore (li, el. childNodes [0]) ;}}); // ================================================ ===== myScroll. refresh (); // after the data is loaded, call the interface update method Remember to refresh when contents are loaded (ie: on ajax completion)}, 1000 ); // <-- Simulate network congestion, remove setTimeout from production! }

Initialization

/*** Initialize the iScroll control */function loaded () {pullDownEl = document. getElementById ('pulldown'); pullDownOffset = pullDownEl. offsetHeight; pullUpEl = document. getElementById ('pullup'); pullUpOffset = pullUpEl. offsetHeight; myScroll = new iScroll ('wrapper', {scrollbarClass: 'myrollbar',/* important style */useTransition: false, topOffset: pullDownOffset, onRefresh: function () {if (pullDownEl. className. match ('Loading') {pullDownEl. className = ''; pullDownEl. querySelector ('. pullDownLabel '). innerHTML = 'pull-down refresh... ';} else if (pullUpEl. className. match ('loading') {pullUpEl. className = ''; pullUpEl. querySelector ('. pullUpLabel '). innerHTML = 'pull up to load more... ';}}, onScrollMove: function () {if (this. y> 5 &&! PullDownEl. className. match ('flip') {pullDownEl. className = 'flip'; pullDownEl. querySelector ('. pullDownLabel '). innerHTML = 'start updating... '; this. minScrollY = 0;} else if (this. y <5 & pullDownEl. className. match ('flip') {pullDownEl. className = ''; pullDownEl. querySelector ('. pullDownLabel '). innerHTML = 'pull-down refresh... '; this. minScrollY =-pullDownOffset;} else if (this. y <(this. maxScrollY-5 )&&! PullUpEl. className. match ('flip') {pullUpEl. className = 'flip'; pullUpEl. querySelector ('. pullUpLabel '). innerHTML = 'start updating... '; this. maxScrollY = this. maxScrollY;} else if (this. y> (this. maxScrollY + 5) & pullUpEl. className. match ('flip') {pullUpEl. className = ''; pullUpEl. querySelector ('. pullUpLabel '). innerHTML = 'pull up to load more... '; this. maxScrollY = pullUpOffset ;}}, onScrollEnd: function () {if (PullDownEl. className. match ('flip') {pullDownEl. className = 'loading'; 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 document bound to the iScroll control. addEventListener ('touchmove ', function (e) {e. preventDefault () ;}, false); document. addEventListener ('domainloaded', loaded, false );