您的位置:首页 > Web前端 > JQuery

JQuery插件第三十七个:瀑布流便捷应用插件

2014-02-01 09:19 465 查看
(function($) {
    $.fn.noPage = function(options) {
        var defaults = {
            index: "img",   //地址栏分页参数名
            item: "",       //列表Css类
            foot: "",       //列表尾部Css类
            url: "",        //读取当前数据端地址,即调用本插件的列表页面
            end: null,   //判断数据结束标记函数
            init: null      //初始化函数,将原来列表页面的页码隐藏
        }
        var opts = $.extend(defaults, options);
        // 获取当前文件名
        function getFileName() {
            var url = this.location.href
            var pos = url.lastIndexOf("/");
            if (pos == -1) {
                pos = url.lastIndexOf("\\")
            }
            var filename = url.substr(pos + 1)
            return filename.split('?')[0];
        }
        if (typeof opts.init == "function")
        { if (!opts.init()) return; }
        var pageName = opts.index;
        var urlParam = { "random": Math.random() * 1000 };
        urlParam[pageName] = 2;
        var s = location.search;
        if (s != null && s.length > 1) {
            var sarr = s.substr(1).split("&");
            var tarr;
            for (i = 0; i < sarr.length; i++) {
                tarr = sarr[i].split("=");
                urlParam[tarr[0]] = tarr[1];
            }
        }
        var ajaxServer = (opts.url == "") ? getFileName() : opts.url;
        //执行过程            
        this.each(function() {
            var $container = $(this); //列表容器JQ对象
            $container.css("height", "auto");   //附加瀑布流插件 //阻止bug出现
            var onOff = true;                   //程序设置为非锁定状态
            $(window).scroll(function() {       //滚动条滚动到离底部距离20的时候触发
                if (Number($(document).height()) * 1 - $(this).scrollTop() - $(this).height() < 20) {   //当滚动到最底部以上20像素时, 加载新内容
                    if (onOff) {
                        onOff = false;  //程序设置为锁定状态
                        $.ajax({
                            url: getFileName(),
                            dataType: "text",
                            type: "GET",
                            async: false,
                            data: urlParam,
                            beforeSend: function() { },
                            success: function(data) {
                                if (data != null) {
                                    var $List = $(data).find(opts.item);
                                    if ($List.length == 0) { alert("没有了"); return; }
                                    //正式加载列表数据.如果指定底部则把数据插入到底部上面
                                    var $Footer = $container.find(opts.foot);
                                    if ($Footer.length == 0) {
                                        $container.append($List);
                                    } else {
                                        $List.insertBefore($Footer);
                                    }
                                    if (typeof opts.end == "function")
                                    { var flag = opts.end(data); if (!flag) return; }

                                    onOff = true;
                                    urlParam[pageName] = parseInt(urlParam[pageName]) + 1;
                                }
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                alert(XMLHttpRequest.status);
                                alert(XMLHttpRequest.readyState);
                                alert(textStatus);
                            }
                        })
                    }
                }
            });
        });
    };
})(jQuery);

$(function() {
    $(".mian_b_bg").noPage({
        item: ".ItemTemplate",
        foot: ".FooterTemplate",
        init: function() {
            var paginator = $(".paginator");
            if (paginator.length > 0) {
                $(".fy_ty").css("display", "none");
                return true;
            } else {
                alert("已经显示全部记录");
                return false;
            }
        },
        end: function(data) {
            var paginator = $(".paginator", data);
            if (paginator.find(".cpb").next().is("a")) {
                return true;
            } else {
                setTimeout(function() {
                    alert("没有货了");
                }, 1800);
                return false;
            }
        }
    })
});


以上插件配合在单页查看更多数据,不翻页浏览全部列表。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: