jQuery實現(xiàn)手機版頁面翻頁效果的簡單實例
更新時間:2016年10月05日 20:25:49 投稿:jingxian
下面小編就為大家?guī)硪黄猨Query實現(xiàn)手機版頁面翻頁效果的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
如下所示:
var page = 1;
var size = 6;
var mark = 0;
var url = "{pigcms{:U('Order/index', array('page'=>'d%'))}";
var commentTpl = '<div style="margin-top: 10px">\
<button data-oid="<order_id>" style="width: 65px; height: 20px;z-index:999;" onclick="comment()">去評價</button>\
</div>';
var template = '<li class="item-order-li">\
<a class="item-shop" href="{Pigcms{:U('Store/shop', array("store_id"=>"<store_id>"))}">\
<i class="shop-icon"></i>\
<span class="shop-name">{store_name}</span>\
<i class="enter-icon"></i>\
</a>\
<div class="item-order" data-node="item-order" data-oid="<order_id>" data-status="0">\
<a style="z-index:0;" href="{pigcms{:U('Order/status', array("order_id"=>"<order_id>"))}">\
<div class="list-img"> <img class="lazy-load" src="{pic_info}"> </div>\
<div class="list-content">\
<div class="order-detail">\
<p class="time">{create_time}</p>\
<p class="desc">總價:¥{discount_price}</p>\
</div>\
<div class="order-content-rt">\
<div class="order-status "> {state}{comment_tpl}</div>\
</div>\
</div></a>\
</div>\
</li>';
var emptyTpl = '<div id="refund-widget-list" class="refund-widget-list">\
<ul class="refundlist" data-node="refundList">\
<div class="no-result">\
<figure></figure>\
<p>暫無訂單</p>\
</div>\
</ul>\
</div>';
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('<order_id>', "gm"), item['order_id']);
} else if(item['comment_status'] == 1 && item['order_status'] == 1){
item['comment_tpl'] = '<div style="margin-top: 10px"><span style="width: 55px; height: 20px;">已評價</span></div>';
} else {
item['comment_tpl'] = '<div style="margin-top: 10px"><span style="width: 55px; height: 20px;"></span></div>';
}
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('<order_id>', "gm"), item['order_id']);
html = html.replace(new RegExp('<store_id>', "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();
}
});
});
以上就是小編為大家?guī)淼膉Query實現(xiàn)手機版頁面翻頁效果的簡單實例全部內(nèi)容了,希望大家多多支持腳本之家~
相關文章
使用jQuery設置disabled屬性與移除disabled屬性
Readonly只針對input和textarea有效,而disabled對于所有的表單元素都有效,下面為大家介紹下使用jQuery設置disabled屬性2014-08-08
jQuery實現(xiàn)contains方法不區(qū)分大小寫的方法
這篇文章主要介紹了jQuery實現(xiàn)contains方法不區(qū)分大小寫的方法,實例分析了針對contains方法的重寫技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
Jquery如何使用animation動畫效果改變背景色的代碼
這篇文章主要介紹了Jquery如何使用animation動畫效果改變背景色,需要的朋友可以參考下2020-07-07
用Jquery重寫windows.alert方法實現(xiàn)思路
本文將介紹下用Jquery重寫windows.alert方法,已經(jīng)在 IE8 , firefox3.0.11下面測試通過,喜歡的朋友可以放心使用2013-04-04

