ajax实现翻书效果,jQuery实现手机版页面翻页效果的简单实例
var page = 1;
var size = 6;
var mark = 0;
var url = "{pigcms{:U('Order/index', array('page'=>'d%'))}";
var commentTpl = '
去评价\
';
var template = '
\
""))}">\
\
{store_name}\
\
\
""))}">\
\
{create_time}
\
总价:¥{discount_price}
\
\
\
\
\
\';
var emptyTpl = '
- \
暂无订单
\
\\
';
function getList() {
if (mark) {
return false;
}
mark = 1;
var requestUrl = url.replace(/d%/, page);
$("#page-loader").show();
$.get(requestUrl, function(json){
if (json.num > 0) {
render(json.list);
$("#page-loader").hide();
page = page + 1;
} else if(json.num <= 0 && page == 1) {
$(".order-list").html(emptyTpl);
}
if (json.num >= size) {
mark = 0;
}
$("#page-loader").hide();
}, 'json');
}
function render(data){
for (var i=0,item; item=data[i++];) {
var html = template;
if (item['comment_status'] == 0 && item['order_status'] == 1) {
item['comment_tpl'] = commentTpl.replace(new RegExp('', "gm"), item['order_id']);
} else if(item['comment_status'] == 1 && item['order_status'] == 1){
item['comment_tpl'] = '
';
} else {
item['comment_tpl'] = '
}
switch (item['order_status']) {
case '0': item['state'] = '订单失效';break
case '1': item['state'] = '订单完成';break
case '2': item['state'] = '商家未确认';break
case '3': item['state'] = '商家已确认';break
case '4': item['state'] = '已取餐';break
case '5': item['state'] = '正在配送';break
case '6': item['state'] = '退单';break
case '7': item['state'] = '商家取消订单';break
case '8': item['state'] = '配送员已接单';break
}
html = html.replace(new RegExp('', "gm"), item['order_id']);
html = html.replace(new RegExp('', "gm"), item['store_id']);
for (var key in item) {
html = html.replace(new RegExp('{'+key+'}',"gm"), item[key]);
}
$(".order-list").append(html);
}
}
getList();
function comment(e){
e = e || window.event;
e.stopPropagation();
e.preventDefault();
var oid = $("button").attr("data-oid");
location.href = "{pigcms{:U('User/comment')}&order_id="+oid;
}
$(document).ready(function(){
var WindowHeight = $(document).height;
$(window).scroll(function(){
var top = $(document).scrollTop();
var height = $(document).height() - $(window).height() - 10;
if (top >= height) {
getList();
}
});
});
ajax实现翻书效果,jQuery实现手机版页面翻页效果的简单实例相关推荐
- 手机查看html效果,使用IE浏览器查看页面手机端效果的方法
近期制作手机端页面比较多,经常会遇到在PC端模拟手机端样式的时候,一般情况下是用chrome进行模拟,但是也有的时候,我们可以用IE模拟,我讲的IE是win10里面的Edgee. 方法/步骤 首先,我 ...
- 织梦列表页生成的html在哪里,织梦系统给手机版生成静态页HTML的方法
原标题:织梦系统给手机版生成静态页HTML的方法 织梦dedecms默认的手机端不能生成静态,对于使用静态的网站来说多少有些不方便,其实dedecms可以通过一种另类的方法来给手机端生成静态页面的. ...
- JQuery Mobile 手机显示页面偏小
转自:http://blog.csdn.net/starrexstar/article/details/8057400 今天第一次用JQuery Mobile做了个3个手机小页面,一个登陆页面.一个列 ...
- [转]JQuery Mobile 手机显示页面偏小_se7en3_新浪博客
今天第一次用JQuery Mobile做了个3个手机小页面,一个登陆页面.一个列表页面和一个表单页面,页面中的组件呈现一切正常. 但出现了一个奇怪的问题,登陆页面大小正常,到了列表页面和表单页面就显得 ...
- 手机版页面正式发布 html5取代wap(wml)
为什么80%的码农都做不了架构师?>>> 前不久就想做一个wap网站,但由于智能手机的流行就放弃了WML技术 开启手机网页浏览,选择性放弃wap 所以经理了最后的思考就采用了j ...
- 微信支付页面模板html,jQuery仿手机微信支付输入密码界面效果
js代码 $(function(){ //出现浮动层 $(".ljzf_but").click(function(){ $(".ftc_wzsf").show( ...
- Jquery实现点击页面发送弹幕效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- html自动滚屏效果,jQuery实现公告新闻自动滚屏效果实例代码
本文是小编参考网络上的一个小demo,自己做了下扩展,原来是向上滚动的,扩展了一个向下滚动的方法,具体实例代码如下所示: 滚屏实验 ul,li{margin:0;padding:0} #scrollD ...
- 【前端】真实手感翻书,书页卷角,JS翻页
完整一套JS在线阅读器: http://www.turnjs.com/ 真实手感翻页 https://www.html5tricks.com/demo/css3-page-flip/index.htm ...
最新文章
- SQL Server里的INTERSECT
- 数据库连接用户名和密码加密
- 【转】JPG打包压缩后比原来尺寸还大
- datastage配置oracle,IBM Datastage8.5配置问题
- sklearn 数据预处理1: StandardScaler
- ORACLE 發送郵件(全)
- Keras(六)Autoencoder 自编码 原理及实例 Savereload 模型的保存和提取
- 阿里云服务器无法ping通,ping不同阿里云服务器
- 如何用计算机算分组数据方差,『分组数据如何Excel计算标准差』Excel表格求分组数据的方差...
- 一个优秀活跃的视频转码项目分享
- Windows小技巧 -- 已连接wifi密码查看
- 计算机硬件主流参数,小白秒成DIY大神 自学电脑硬件参数速成攻略
- 远程登录时由于帐户限制,你无法登录的解决办法[作者:Jackie]
- 一大波优秀3D作品来袭!看各国3D艺术家如何描绘2020!
- Jetson嵌入式系列模型部署-1
- 关于大数据后端粉丝交流群
- hevc 继续色度半像素差值
- visibility:属性
- C#人民币大小写转换
- JDBC查询数据库时出现 sql语句正确,但是查询英文可以,汉字不行的情况解决办法
热门文章
- oracle未找到时区,解决ORA-01882:未找到时区区域%s
- java spring boot 注解验证_如何理解Java原生注解和Spring 各种注解?
- new arraylist内存_如何避免内部类中的内存泄漏
- java tostring方法_Java虚拟机如执行方法调用的(二)?
- 实数序列频谱的共轭对称性(DFT与IDFT仿真实现)
- 计算机视觉(一)概述
- Android缓存学习入门
- Material Design入门(三)
- 键盘上的反引号怎么打
- python selenium 用法 和 Chrome headless