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; } } }) });
以上插件配合在单页查看更多数据,不翻页浏览全部列表。
相关文章推荐
- 推荐8个独特应用的JQuery拖放插件
- 10款设计独特的jQuery/CSS3应用插件
- jquery 插件实现瀑布流图片展示实例
- 100+ jquery插件应用,让你的Web开发事半功倍
- jQuery插件之-瀑布流插件
- 7个经典创意jQuery应用插件及源码
- jquery自动完成插件(autocomplete)应用之PHP版
- waterfall-Jquery瀑布流插件,Jquery瀑流式插件
- jquery的学习之validation插件的应用
- 分享一套帮助你优化开发web应用的jQuery插件集 - Vanity Toolset
- (转)15个非常棒的jQuery无限滚动插件【瀑布流效果】
- PHP+jQuery实现Ajax分页效果:jPaginate插件的应用
- 精选29款非常实用的jQuery应用插件(免积分下载)
- CSS3 border-image详解、应用及jQuery插件
- jquery插件chosen和select的简单应用
- [置顶] 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
- 使用jQuery图表插件Sparklines来开发一个实用的网站PV(page view)实时监控应用
- jquery File Upload 插件应用之解析返回json对象
- jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)
- jQuery 插件autocomplete 应用[转]