JQuery加载更多插件

来源:互联网 发布:c语言中变量命名规则 编辑:程序博客网 时间:2024/06/04 19:28
/** * 加载更多插件,支持点击模式(mode:click)和滚动模式(mode:scroll) *  * date2014-3-26 增加动态设置参数方法 * date2015-8-11 增加showDataMode参数,显示内容的方法 *  * 1,使用 * var param = { *url: '', *container: '' * } * $.automore(param);(参数为json格式,具体见下面) *  * 2,参数(param对象中的元素): * 参数名称类型默认值说明 *  mode:string 'click'类型:click点击模式 scroll自己加载模式 *  url:string''/必填ajax请求的地址 *         param:string''ajax请求时的参数 *       pageNum:integer0请求的页数 *       hasMore:booleantrue是否有更多,初始化时可以指定 *   container:string'container'显示内容的容器 *      loadmore:string'loadmore'click模式下,触发事件的对象 *  scrollHeight:integer130scroll模式下,滚动条滚动到距页面底部多少位置时触发事件 *    reDataMode:string'html'返回内容的格式:html:静态内容可直接显示,array:数组类型需要自定义数据的显示方法funShowData *  showDataMode:stringappendappend追加,replace替换 *   funShowData:functionfun当数据返回不为html时,调用此方法显示数据 *   defaultLoad:booleanfalse页面加载后是否默认请求 * * 3,控制器返回格式(json) *include_once "/usr/www/job/inc/class/job1001/Job1001Array.php"; *$returnArr = array( *'more'=>$isMore, // 是否有更多 * 'data'=>$data, // 数据 *); *echo json_encode( Job1001Array::arrayIconv( $returnArr ) ); *exit; * 4,返回数据data说明(通过参数reDataMode标识) *1,html:html文本,直接在页面中显示的内容 *2,array:数组,如果返回数组时,需要通过funShowData参数来手工的输出到页面中 **/(function($){$.automore = function(options) {var defaults = {mode: 'click',url: '',param: '',pageNum: 0,hasMore: true,container: 'container',loadmore: 'loadmore',scrollHeight: 130,reDataMode:'html',showDataMode:'append',funShowData:'',defaultLoad: false        }          $.automore.options = $.extend(defaults, options);var options= $.automore.options;if (options.mode != 'click' && options.mode != 'scroll') {alert('参数mode设置不正确!');return;}if ( !options.url ) {alert('参数url设置不正确!');return;}if ( !options.container ) {alert('参数container设置不正确!');return;}// 获得对象var funObject = function(obj_sel) {if (typeof(obj_sel) == 'object') {return obj_sel;} else {var obj = $('#'+obj_sel);if (obj.length) {return obj;}obj = $('.'+obj_sel);if (obj.length) {return obj;}return null;}}// 对象初始化if (options.container) {if ( typeof(options.container) != 'object' ) {options.containerId= options.container} else {options.containerId= options.container.attr('id');}options.container= funObject(options.container);}if (options.loadmore) {options.loadmore= funObject(options.loadmore);}varcacheData= {},cacheObj= {},bAjax= false,bShowData= false;// 点击模式var funModeClick = function(){var clickObj = options.loadmore;if (clickObj) {clickObj.live('click', function(){if (options.hasMore) {funShowData();}});} else {alert('参数loadmore设置不正确!');return;}};// 自动加载模式var funModeScroll = function(){$(window).scroll(function(){var nDHeight= $(document).height(),nWHeight= $(window).height(),nSHeight= $(window).scrollTop(),nLHeight= options.scrollHeight;if ((nWHeight+nSHeight) >= (nDHeight-nLHeight) ) {if (options.hasMore) {funShowData();}}});};// 隐藏加载按钮或滚动模式下的提示语句var funHideLoadmore= function() {if ( !options.hasMore ) {if ( options.loadmore ) {options.loadmore.hide();}}}// 显示数据var funShowData = function() {if ( bShowData ) {return;}bShowData= true;options.pageNum++;var data = funDataCache(options.pageNum);if (!data) {data = funDataRequest();}if (options.reDataMode == 'html') {// 静态内容直接追加var containerObj = options.container;if (containerObj != null) {if ( options.showDataMode == 'replace' ) {containerObj.html(data);} else {containerObj.append(data);}} else {alert('参数container设置不正确!');return;}} else {if (typeof(options.funShowData) != 'function') {alert('参数funShowData设置不正确');return;}options.funShowData(data);}bShowData= false;}// 缓存中取数据var funDataCache = function(key) {var data = null;if (cacheData[options.containerId] && cacheData[options.containerId][key]) {data = cacheData[options.containerId][key];}return data;}// 设置缓存中的数据var funSetDataCache = function(key,data) {if ( !cacheData[options.containerId] ) {cacheData[options.containerId] = {};}cacheData[options.containerId][key] = data;}// ajax请求数据var funDataRequest = function(){if (bAjax) {return;};bAjax = true;var temp = '',request_data= 'page='+options.pageNum;if ( options.param ) {request_data= request_data + options.param;}$.ajax({type: "POST",async: false,url: options.url,data: request_data,dataType: 'json',beforeSend: function (xhr) {options.container.append("<p id='jzz'><img src='http://img3.job1001.com/myNew/ajax-loader.gif' style='margin:0 auto; width: 18px; height: 18px; vertical-align: top; display:block' /></p>");},success: function(d){$("#jzz").remove();if (d.more != undefined) {options.hasMore = d.more;}if (d.data) {temp = d.data;funSetDataCache(options.pageNum,d.data);}if (!options.hasMore && options.loadmore ) {options.loadmore.hide();}},complete: function(xhr, ts){$("#jzz").remove();bAjax = false;}});return temp;};funHideLoadmore();// 不同的模式调用不同的方法switch(options.mode){case 'click':funModeClick();break;case 'scroll':funModeScroll();break;}// 默认是否加载数据if (options.defaultLoad) {funShowData();}};$.automore.options = {};$.automore.setting = function(settings) {if ( settings ) {$.automore.options = $.extend($.automore.options, settings);}}})(jQuery);

0 0
原创粉丝点击