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); }); });  });