jQuery ScrollPagination修改之后

Posted 2020-08-22 小!千

jQuery ScrollPagination修改之后代码

/*
**    Anderson Ferminiano
**    [email protected] -- feel free to contact me for bugs or new implementations.
**    jQuery ScrollPagination
**    28th/March/2011
**    http://andersonferminiano.com/jqueryscrollpagination/
**    You may use this script for free, but keep my credits.
**    Thank you.
*/

(function( $ ){
     
    $.fn.scrollPagination = function(options) {
        var opts = $.extend($.fn.scrollPagination.defaults, options || {});
        var target = opts.scrollTarget;
        if (target == null) {
            target = obj;
        }
        opts.scrollTarget = target;
        return this.each(function() {
            $.fn.scrollPagination.init($(this), opts);
        });
    
    };
    
    $.fn.stopScrollPagination = function() {
        return this.each(function() {
            $(this).attr(‘scrollPagination‘, ‘disabled‘);
        });
    
    };
    
    $.fn.scrollPagination.loadContent = function(obj, opts) {
        var target = opts.scrollTarget;
        var mayLoadContent = $(target).scrollTop() + opts.heightOffset >= $(document).height() - $(target).height();
        if (mayLoadContent) {
            if (opts.beforeLoad != null) {
                opts.beforeLoad();
            }
            $(obj).children().attr(‘rel‘, ‘loaded‘);
            $.ajax({
                type: ‘POST‘,
                url: opts.contentPage,
                data: opts.contentData,
                beforeSend:function(){
                    if( opts.beforeSend != null ){
                        opts.beforeSend();
                    }
                },
                success: function(data) {
                    //call your own function to load the content
                    
                    opts.loader(data);
                    
                    /*
                    var objectsRendered = $(obj).children(‘[rel!=loaded]‘);
    
                    if (opts.afterLoad != null) {
                        opts.afterLoad(objectsRendered);
                    }
                    */
                },
                dataType: opts.dataType
            });
        }
    
    };
    
    $.fn.scrollPagination.init = function(obj, opts) {
        var target = opts.scrollTarget;
        $(obj).attr(‘scrollPagination‘, ‘enabled‘);
    
        $(target).scroll(function(event) {
            if ($(obj).attr(‘scrollPagination‘) == ‘enabled‘) {
                $.fn.scrollPagination.loadContent(obj, opts);
            } else {
                event.stopPropagation();
            }
        });
    
        $.fn.scrollPagination.loadContent(obj, opts);
    
    };
    
    $.fn.scrollPagination.defaults = {
        ‘contentPage‘: null,
        ‘contentData‘: {},
        ‘beforeLoad‘: null,
        ‘afterLoad‘: null,
        ‘scrollTarget‘: null,
        ‘heightOffset‘: 0,
        //Add        
        ‘dataType‘: null,
        ‘beforeSend‘:null,
        ‘loader‘: function(data) {}
    };     

})( jQuery );

调用代码

// 定义页数
var page = 1;

$(function() {

    // 底部加载进度条
    var loadinghtml = ‘<div class="loading"><img src="__PUBLIC__/Mobile/Images/loadingxxx.gif" align="absmiddle" /></div>‘;

    $(‘.BookLibrarySearchList‘).scrollPagination({
        // 你要搜索结果的页面
        ‘contentPage‘: "{:U(‘Ranking/AjaxRandList‘,array(‘tag‘=>$tag,‘type‘=>$type))}",
        // 你可以通过 children().size() 知道哪里是分页[JSON格式]
        ‘contentData‘: {
            cPage: function() {
                return page;
            }
        },
        // 谁该怎么滚动？在这个例子中，完整的窗口
        ‘scrollTarget‘: $(window),
        // 在页面到达结束之前，从多少像素开始加载？
        ‘heightOffset‘: 50,
        // 前负荷，一些功能，可能显示一个加载DIV
        ‘beforeLoad‘: function() {
            // 翻页页数累加
            page = page + 1;
        },
        ‘beforeSend‘: function() {
            // 加载区域显示
            $(‘.loading‘).remove();
            $(‘.BookLibrarySearchList‘).append(loadinghtml);
        },
        ‘afterLoad‘: function(elementsLoaded) {
            /*
                var i = 0;
                if ($(‘#content‘).children().size() > 100) {
                    $(‘#nomoreresults‘).fadeIn();
                    $(‘#content‘).stopScrollPagination();
                }
                */
        },
        ‘dataType‘: ‘JSON‘,
        ‘loader‘: function(data) {

            // 隐藏加载区域
            $(‘.loading‘).remove();
            if (data.length <= 0) {
                $(‘.BookLibrarySearchList‘).stopScrollPagination();

                $(‘.BookLibrarySearchList .loadingNo‘).remove();
                $(‘.BookLibrarySearchList‘).append("<div class=‘loadingNo‘>没有了!</div>");
            } else {
                for (var i = 0; i < data.length; i++) {
                    var ChapterObj = data[i].ChapterObj;
                    var html = "";
                    html += "<div class=\"list\">";
                    html += "    <div class=\"table\">";
                    html += "        <table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"100%\">";
                    html += "            <tr>";
                    html += "                <td rowspan=\"4\" width=\"30%\"><a href=\"" + data[i].url + "\" title=\"" + data[i].title + "\">";
                    html += "                    <img src=\"__PUBLIC__/" + data[i].picture + "\" />";
                    html += "                </a></td>";
                    html += "                <td width=\"70%\" class=\"b c\">";
                    html += "                    <a href=\"" + data[i].url + "\" title=\"" + data[i].title + "\">" + data[i].title + "</a>";
                    html += "                    <span>" + data[i].hits + "万点击</span>";
                    html += "                </td>";
                    html += "            </tr>";
                    html += "            <tr>";
                    html += "                <td class=\"b\">作者：" + data[i].penName + "</td>";
                    html += "            </tr>";
                    html += "            <tr>";
                    if (ChapterObj.length == 0) {
                        html += "                <td class=\"b\">更新：暂无</td>";
                    } else {
                        html += "                <td class=\"b\">更新：" + ChapterObj.addTime + "&nbsp;/&nbsp;" + ChapterObj.title + "</td>";
                    }
                    html += "            </tr>";
                    html += "            <tr>";
                    html += "                <td class=\"a b\">" + data[i].jianjie + "</td>";
                    html += "            </tr>";
                    html += "        </table>";
                    html += "    </div>";
                    html += "</div>";

                    $(‘.BookLibrarySearchList‘).append(html);
                }
            }
        }
    });

});