<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

/**
* 调用参数,方法如:$('#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="/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 = settings.data;
postdata['last'] = variables.last;
postdata['amount'] = ile;
$.post(settings.url, postdata, function(data) {
$(settings.trigger).css('display', 'block');
methods.add_elements(data);
lock = false;
$("#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)

  

使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据的更多相关文章

  1. jQuery的JS库在本地运行项目时提示无法加载

    最近公司有个项目在我本地运行时引用本地的jquery.js,浏览器提示无法加载 <script src="/js/newperson/jquery-1.11.3.min.js" ...

  2. jquery/原生js/css3 实现瀑布流以及下拉底部加载

    思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...

  3. jQuery Mobile页面跳转后未加载外部JS(转)

    http://thewaychung.iteye.com/blog/1807447 在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中 ...

  4. jQuery Mobile页面跳转后未加载外部JS原因分析及解决

    在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中引用的JS并未成功运行.因为,JQM并为将整个页面加载到当前的dom中,仅将data ...

  5. ajax实现简单的点击左侧菜单,右侧加载不同网页

    实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...

  6. web实现点击左侧导航,右侧加载不同的网页(这种布局多用于后台管理系统)

    (1)实现方法:采用ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) ( ...

  7. 使用jquery结合ajax做下拉刷新页面,上拉加载页面,俗称分页

    jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...

  8. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  9. jquery实现简单瀑布流布局(续):图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

随机推荐

  1. C语言命令行解析函数:getopt/getopt_long

    命令行工具下的参数选项有两种,长选项和短选项.短选项以-开头,后面跟单个字母:长选项以--开头,后面可跟多个字母. 一. getopt() 1.功能:解析命令行短选项参数 2.函数原型: #inclu ...

  2. 使用systemd严格保证启动顺序

    需求: 服务B要在服务A之后启动,且由于存在强内在依赖关系,B必须在A完成初始化之后才能被启动. 解决方法: 首先使用systemd,service脚本需要配置服务B要after服务A. 其次,A服务 ...

  3. [NN] 随机VS批训练

    本文翻译节选自1998-Efficient BackProp, Yann LeCun et al.. 4.1 随机VS批训练 每一次迭代, 传统训练方式都需要遍历所有数据集来计算平均梯度. 批训练也同 ...

  4. java 的关键字 native

    native native 关键字说明其修饰的方法是一个原生态方法,方法对应的实现不是在当前文件,而是在用其他语言(如C和C++)实现的文件中.Java语言本身不能对操作系统底层进行访问和操作,但是可 ...

  5. 【android】[转]Android软件测试的日志文件抓取简介

    1    log文件分类简介 实时打印的主要有:logcat main,logcat radio,logcat events,tcpdump,还有高通平台的还会有QXDM日志 状态信息的有:adb s ...

  6. MVC框架请求处理

    为开发团队选择一款优秀的MVC框架是件难事儿,在众多可行的方案中决择需要很高的经验和水平.你的一个决定会影响团队未来的几年.要考虑方面太多: 简单易用,以提高开发效率.使小部分的精力在框架上,大部分的 ...

  7. a标签不用点击模拟跳转url。

    因为请求到数据前要判断用户是否是登录状态, 所以就想页面数据请求成功,就跳转到登录页面, 就用了location.href = url. 结果因为同源策略不能访问, 没想到a标签竟然可以直接跳转这个U ...

  8. CentOs7安装gitlab(转!)

    沧浪之水清兮,可以濯吾缨; 沧浪之水浊兮,可以濯吾足.                                                                         ...

  9. ni_set()函数的使用 以及 post_max_size,upload_max_filesize的修改方法

    Apache服务器处理: ini_set('display_errors', 'Off');ini_set('memory_limit', -1); //-1 / 10240Mini_set(&quo ...

  10. uploadify是通过flash上传,服务器获取type为application/octet-stream

    uploadify是通过flash上传,服务器获取type为application/octet-stream,因此允许上传的类型要加上application/octet-stream