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檔案】

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