我是JS& jQuery所以请跟我一起.
我试图创建动态列表< ul>使用JS,最后它的工作.现在我需要在列表中实现无限滚动概念,使用jScroll插件.
所以我研究了很多关于jScroll,但我找不到任何我需要的教程.大部分使用PHP语言的教程很多,而在我的情况下,我已经使用简单的SELECT查询(LIMIT和OFFSET)完成了我的服务器(PHP)代码,并返回一个json.
这是我的jQuery / AJAX代码,从数据库创建动态列表,它已经工作：
$.ajax({
url: "http://localhost/jwmws/index.PHP/jwm/search/msmall/"+keyword,//This is the current doc
type: "GET",error : function(jq,st,err) {
alert(st + " : " + err);
},success: function(result){
//generate search result
//float:left untuk hack design
$('#search').append('<p style="float:left;">Search for : ' + keyword + '</p>'
+ '<br/>'
+ '<p>Found ' + result.length + ' results</p>');
if(result.length == 0)
{
//temp
alert("not found");
}
else{
for(var i = 0; i < result.length; i++)
{
//generate <li>
$('#list').append('<li class="Box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p></li>');
}
var i=0;
$(".Box").each(function(){
var name,address,picture = "";
if(i < result.length)
{
name = result[i].name;
address = result[i].address;
picture = result[i].Boxpicture;
}
$(this).find(".name").html(name);
$(this).find(".address").html(address);
$(this).find(".picture").attr("src",picture);
i++;
});
}
}
});
因为我的动态列表已经在运行,现在我只需要实现jScroll.但是,我不明白其代码,如：
$('.infinite-scroll').jscroll({
loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',padding: 20,nextSelector: 'a.jscroll-next:last',contentSelector: 'li'
});
在我的情况下如何实现？我只是追加< li>在我的jQUery / AJAX中,nextSelector怎么样？
任何帮助不胜感激,请问您是否有问题.
谢谢你的帮助：D
解决方法
你把每一件事情都设置好,只需要在适当的时候调用jscroll.
$.ajax({
url: "http://localhost/jwmws/index.PHP/jwm/search/msmall/"+keyword,//This is the current doc
type: "GET",err) {
alert(st + " : " + err);
},success: function(result){
//generate search result
//float:left untuk hack design
$('#search').append('<p style="float:left;">Search for : ' + keyword + '</p>'
+ '<br/>'
+ '<p>Found ' + result.length + ' results</p>');
if(result.length == 0)
{
//temp
alert("not found");
}
else{
for(var i = 0; i < result.length; i++)
{
//generate <li>
$('#list').append('<li class="Box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p></li>');
}
//After generation of <li> put a next link
$('#list').append('<a href="#" class="jscroll-next">NEXT</a>');
//call to jscroller to be triggered
jscroller();
var i=0;
$(".Box").each(function(){
var name,picture = "";
if(i < result.length)
{
name = result[i].name;
address = result[i].address;
picture = result[i].Boxpicture;
}
$(this).find(".name").html(name);
$(this).find(".address").html(address);
$(this).find(".picture").attr("src",picture);
i++;
});
}
}
});
//The function to be called when <li> are rendered.
function jscroller(){
$('.infinite-scroll').jscroll({
loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',contentSelector: 'li'
});
}
