首页 > 代码库 > 使用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)