我是JS和jQuery的初学者,请耐心等待。
我试图使用JS创建一个动态列表<ul>
并最终使其工作。现在,我需要使用jScroll插件在列表中实现无限滚动的概念。
因此,我对jScroll进行了很多研究,但找不到所需的任何教程。大多数教程几乎都使用PHP
语言,而在本例中,我使用简单的PHP
查询(上面带有SELECT
和LIMIT
)并返回了OFFSET
来完成服务器(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",
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>');
}
//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, 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++;
});
}
}
});
//The function to be called when <li> are rendered.
function jscroller(){
$('.infinite-scroll').jscroll({
loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
padding: 20,
nextSelector: 'a.jscroll-next:last',
contentSelector: 'li'
});
}