本文介绍如何使用jQuery.more.js插件实现网页底部点击加载更多数据的功能。通过配置参数，可以定制加载数据的方式及展示效果。文章还提供了具体的HTML模板、PHP后端代码及jQuery.more.js插件的实现细节。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<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代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//手机商户已验证代金券列表
$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'
]);
}
|
json格式 分别 checkcode password 分别对应 htmll模板中的 单个选项的class
[{checkcode:22,password:11},{checkcode:33,password:4444}]
jquery.more.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
/**
* 调用参数,方法如:$('#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)
|
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
