JQuery加载更多插件

时间：2022-12-22 18:42:58
/**
 * 加载更多插件，支持点击模式(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);

标签：

相关文章