首页 > 代码库 > jQuery ScrollPagination修改之后

jQuery ScrollPagination修改之后

jQuery ScrollPagination修改之后代码

/*
**    Anderson Ferminiano
**    contato@andersonferminiano.com -- 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="http://www.mamicode.com/__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=http://www.mamicode.com/"" + data[i].url + "\" title=\"" + data[i].title + "\">";
                    html += "                    <img src=http://www.mamicode.com/"__PUBLIC__/" + data[i].picture + "\" />";
                    html += "                </a></td>";
                    html += "                <td width=\"70%\" class=\"b c\">";
                    html += "                    <a href=http://www.mamicode.com/"" + 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);
                }
            }
        }
    });

});

 

jQuery ScrollPagination修改之后