jqmobipanel内滚动插件jq.scroller.js

jqmobi的pannel本身可以实现滚动，但如果要在panel内实现滚动，jq.mobi提供了一个插件jq.scroller.js，可以很好的实现滚动效果。

【头部文件】

<script src="appframework.min.js"></script> <script src="appframework.ui.js"></script> <script src="af.scroller.js"></script>

【CSS文件】

<link rel="stylesheet" type="text/css" href="af.ui.base.min.css">

【HTML结构】

<div id="afui">
<div id="content">
<div id="main" class="panel" selected="true">
<ul class="list" id="j_listContainer">
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
<li>
item1
</li>
</ul>
</div>
</div>
</div>

【JS代码调用】

$.ui.ready(function () {
var myScroller, currentPage = 1;
myScroller = $("#main").scroller();
myScroller.addInfinite();
myScroller.addPullToRefresh();
$.bind(myScroller, 'scrollend', function () {
console.log("scroll end");
});
$.bind(myScroller, 'scrollstart', function () {
console.log("scroll start");
});
$.bind(myScroller, "refresh-trigger", function () {
console.log("refresh-trigger");
});
var hideClose;
$.bind(myScroller, "refresh-release", function () {
console.log("refresh-release");
var that = this;
clearTimeout(hideClose);
hideClose = setTimeout(function () {
$('#j_listContainer').prepend('<li>item2</li>');
console.log("hiding manually refresh");
that.hideRefresh();
}, 1000);
return false; //tells it to not auto-cancel the refresh });
$.bind(myScroller, "refresh-cancel", function () {
console.log("refresh-cancel");
clearTimeout(hideClose);
});
$.bind(myScroller, "refresh-finish", function () {
console.log("refresh-finish");
});
myScroller.enable();
$.bind(myScroller, "infinite-scroll", function () {
var self = this;
if (currentPage >= 5) return false;
console.log("infinite triggered");
$(this.el).append("<div id='infinite' style='height:60px;line-height:60px;text-align:center;font-weight:bold'>加载更多...</div>");
$.bind(myScroller, "infinite-scroll-end", function () {
$.unbind(myScroller, "infinite-scroll-end");
self.scrollToBottom();
setTimeout(function () {
$(self.el).find("#infinite").remove();
self.clearInfinite();
$('#j_listContainer').append('<li>item3</li><li>item3</li><li>item3</li><li>item3</li><li>item3</li><li>item3</li>');
currentPage++; //self.scrollToBottom(); },3000); }); });  });