首页 > 代码库 > 使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据
使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据
<div class="bus-nav-bar ft12"> <div class="navt bor-r-c pos-rel {if $int == 0}fwbold{/if}"><a href="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/{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 = http://www.mamicode.com/merchant_checked_list(107, $params, 5, $last);>
jquery.more.js
/** * 调用参数,方法如:$(‘#more‘).more({‘url‘: ‘data.php‘}); * amount :‘10‘ 每次显示记录数 * url :‘comments.php‘ 请求后台的地址 * data:{}, 自定义参数 * template:‘.single_item‘ html记录DIV的class属性 * trigger :‘#get_more‘ 触发加载更多记录的class属性 * scroll :‘false‘ 是否支持滚动触发加载 * offset :‘100‘ 滚动触发加载时的偏移量 */(function($) { var target = null; var template = null; var lock = false; var variables = { ‘last‘: 0 }; var settings = { ‘amount‘: ‘8‘, ‘url‘: ‘‘, ‘template‘: ‘.single_item‘, ‘data‘:{}, ‘trigger‘: ‘#get_more‘, ‘scroll‘: ‘false‘, ‘offset‘: ‘100‘ }; var methods = { init: function(options) { return this.each(function() { if (options) { $.extend(settings, options); } template = $(this).children(settings.template).wrap(‘<div/>‘).parent(); template.css(‘display‘, ‘none‘); $(this).append(‘<div class="loading ft12" id="waitbox"><img src="http://www.mamicode.com/static/m/images/loading.gif" width="19" height="19" />载入中..</div>‘); $(this).children(settings.template).remove(); target = $(this); if (settings.scroll == ‘false‘) { $(this).find(settings.trigger).bind(‘click.more‘, methods.get_data); $(this).more(‘get_data‘); } else { if ($(this).height() <= $(this).attr(‘scrollHeight‘)) { target.more(‘get_data‘, settings.amount * 2); } $(this).bind(‘scroll.more‘, methods.check_scroll); } }); }, check_scroll: function() { if ((target.scrollTop() + target.height() + parseInt(settings.offset)) >= target.attr(‘scrollHeight‘) && lock == false) { target.more(‘get_data‘); } }, remove: function() { target.children(settings.trigger).unbind(‘.more‘); target.unbind(‘.more‘); target.children(settings.trigger).remove(); }, add_elements: function(data) { var root = target; var counter = 0; if (data) { $(data).each(function() { counter++; var t = template; $.each(this, function(key, value) { if (t.find(‘.‘ + key)) t.find(‘.‘ + key).html(value); }); if (settings.scroll == ‘true‘) { root.children(‘.more_loader_spinner‘).before(t.html()); } else { root.children(settings.trigger).before(t.html()); } root.children(settings.template + ‘:last‘).attr(‘id‘, ‘more_element_‘ + ((variables.last++) + 1)); }); } else { methods.remove(); } target.children(‘.more_loader_spinner‘).css(‘display‘, ‘none‘); if (counter < settings.amount) methods.remove(); }, get_data: function() { var ile; lock = true; target.children(".more_loader_spinner").css(‘display‘, ‘block‘); $(settings.trigger).css(‘display‘, ‘none‘); if (typeof (arguments[0]) == ‘number‘) ile = arguments[0]; else { ile = settings.amount; } var postdata = http://www.mamicode.com/settings.data;"#waitbox").remove(); }, ‘json‘); } }; $.fn.more = function(method) { if (methods[method]) return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); else if (typeof method == ‘object‘ || !method) return methods.init.apply(this, arguments); else $.error(‘Method ‘ + method + ‘ does not exist!‘); }})(jQuery)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。