<转>使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据
模板页
<div class="bus-nav-bar ft12"> <div class="navt bor-r-c pos-rel {if $int == 0}fwbold{/if}"><a href="portal.php?mod=merchant&action=voucherlist&int=0">全部订单</a><em class="pos-abs"></em></div> <div class="navt bor-r-c pos-rel {if $int == 7}fwbold{/if}"><a href="portal.php?mod=merchant&action=voucherlist&int=7">最近7天订单</a><em class="pos-abs"></em></div> <div class="navt pos-rel {if $int == 30}fwbold{/if}"><a href="portal.php?mod=merchant&action=voucherlist&int=30">最近一个月订单</a><em class="pos-abs"></em></div> </div> <div class="bus94 m-0-auto" id="vlist"> <ul class="busbox ft12"> <li class="headh2">消费确认码：<span class="checkcode"></span></li> <li class="headh2">电 子 串 码：<span class="password"></span></li> <li class="headh2">商 品 名 称：<span class="productname"></span></li> <li class="headh2">商 品 价 格：￥<span class="price"></span></li> <li class="headh2">验 证 时 间：<span class="checktime"></span></li> </ul> <div id="get_more" class="txtcent button ft12">更多</div> </div> <script type=text/javascript src="{STATICURL}js/mobile/jquery.more.js"></script> <script type="text/javascript"> jQuery(function() { jQuery('#vlist').more({ "url": 'portal.php?mod=ajax&do=mvoucher', "data":{"int":"{$int}"}, "template": ".busbox", "trigger": "#get_more" }); }); </script>
php程序
//手机商户已验证代金券列表 $int = intval($_GET['int']); $int = in_array($int, array(0,7,30)) ? $int : 0; $params = null; if($int == 7){ $params = array('starttime'=>date("Y-m-d",strtotime("-7days"))); }elseif($int == 30){ $params = array('starttime'=>date("Y-m-d",strtotime("-30days"))); } $last = intval($_GET['last'])/5 + 1; $data = merchant_checked_list(107, $params, 5, $last); if($data && $data['data']){ foreach($data['data'] as $key => $value){ $data['data'][$key]['password'] = decrypt($value['password']); $data['data'][$key]['price'] = deal_money($value['price']); $data['data'][$key]['checktime'] = date('Y-m-d H:i:s', $value['checktime']); } echo json_encode($data['data']); }
jquery.more.js
1 /** 2 * 调用参数,方法如:$('#more').more({'url': 'data.php'}); 3 * amount :'10' 每次显示记录数 4 * url :'comments.php' 请求后台的地址 5 * data:{}, 自定义参数 6 * template:'.single_item' html记录DIV的class属性 7 * trigger :'#get_more' 触发加载更多记录的class属性 8 * scroll :'false' 是否支持滚动触发加载 9 * offset :'100' 滚动触发加载时的偏移量 10 */ 11 (function($) { 12 var target = null; 13 var template = null; 14 var lock = false; 15 var variables = { 16 'last': 0 17 }; 18 var settings = { 19 'amount': '8', 20 'url': '', 21 'template': '.single_item', 22 'data':{}, 23 'trigger': '#get_more', 24 'scroll': 'false', 25 'offset': '100' 26 }; 27 var methods = { 28 init: function(options) { 29 return this.each(function() { 30 if (options) { 31 $.extend(settings, options); 32 } 33 template = $(this).children(settings.template).wrap('<div/>').parent(); 34 template.css('display', 'none'); 35 $(this).append('<div class="loading ft12" id="waitbox"><img src="/static/m/images/loading.gif" width="19" height="19" />载入中..</div>'); 36 $(this).children(settings.template).remove(); 37 target = $(this); 38 if (settings.scroll == 'false') { 39 $(this).find(settings.trigger).bind('click.more', methods.get_data); 40 $(this).more('get_data'); 41 } else { 42 if ($(this).height() <= $(this).attr('scrollHeight')) { 43 target.more('get_data', settings.amount * 2); 44 } 45 $(this).bind('scroll.more', methods.check_scroll); 46 } 47 }); 48 }, 49 check_scroll: function() { 50 if ((target.scrollTop() + target.height() + parseInt(settings.offset)) >= target.attr('scrollHeight') && lock == false) { 51 target.more('get_data'); 52 } 53 }, 54 remove: function() { 55 target.children(settings.trigger).unbind('.more'); 56 target.unbind('.more'); 57 target.children(settings.trigger).remove(); 58 }, 59 add_elements: function(data) { 60 var root = target; 61 var counter = 0; 62 if (data) { 63 $(data).each(function() { 64 counter++; 65 var t = template; 66 $.each(this, function(key, value) { 67 if (t.find('.' + key)) 68 t.find('.' + key).html(value); 69 }); 70 if (settings.scroll == 'true') { 71 root.children('.more_loader_spinner').before(t.html()); 72 } else { 73 root.children(settings.trigger).before(t.html()); 74 } 75 root.children(settings.template + ':last').attr('id', 'more_element_' + ((variables.last++) + 1)); 76 }); 77 } else { 78 methods.remove(); 79 } 80 target.children('.more_loader_spinner').css('display', 'none'); 81 if (counter < settings.amount) 82 methods.remove(); 83 }, 84 get_data: function() { 85 var ile; 86 lock = true; 87 target.children(".more_loader_spinner").css('display', 'block'); 88 $(settings.trigger).css('display', 'none'); 89 if (typeof (arguments[0]) == 'number') 90 ile = arguments[0]; 91 else { 92 ile = settings.amount; 93 } 94 var postdata = settings.data; 95 postdata['last'] = variables.last; 96 postdata['amount'] = ile; 97 $.post(settings.url, postdata, function(data) { 98 $(settings.trigger).css('display', 'block'); 99 methods.add_elements(data); 100 lock = false; 101 $("#waitbox").remove(); 102 }, 'json'); 103 } 104 }; 105 $.fn.more = function(method) { 106 if (methods[method]) 107 return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 108 else if (typeof method == 'object' || !method) 109 return methods.init.apply(this, arguments); 110 else 111 $.error('Method ' + method + ' does not exist!'); 112 } 113 })(jQuery)
