[英]How to implement jScroll?
Im a beginner in JS & jQuery so please bear with me. 我是JS和jQuery的初学者,所以请耐心等待。
Im trying to create a dynamic list <ul>
using JS and finally its working. 我试图使用JS创建一个动态列表<ul>
,最后它的工作。 Now i need to implement the infinite scrolling concept in my list, using jScroll plugin. 现在我需要使用jScroll插件在我的列表中实现无限滚动概念。
So i researched a lot about jScroll, but i cant find any tutorial i needed. 所以我研究了很多关于jScroll的内容,但我找不到我需要的任何教程。 Most of the tutorials using PHP
language pretty much, while in my case i have done my server ( PHP
) code using simple SELECT
query with LIMIT
and OFFSET
on it and returning a json
. 大多数教程都使用PHP
语言,而在我的情况下,我使用简单的SELECT
查询和LIMIT
和OFFSET
完成了我的服务器( PHP
)代码,并返回了一个json
。
This is my jQuery/AJAX code that create the dynamic list from database, its already working : 这是我的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++;
});
}
}
});
Because my dynamic list is already working, now i just need to implement the jScroll. 因为我的动态列表已经工作,现在我只需要实现jScroll。 However, i dont understand its code, like : 但是,我不明白它的代码,如:
$('.infinite-scroll').jscroll({
loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
padding: 20,
nextSelector: 'a.jscroll-next:last',
contentSelector: 'li'
});
How to implement this in my case? 如何在我的情况下实现这一点? I just append <li>
in my jQUery/AJAX so how about the nextSelector
? 我只是将<li>
附加到我的jQUery / AJAX中,那么nextSelector
怎么nextSelector
?
Any help is appreciated, please just ask if you have some question. 任何帮助表示赞赏,请询问您是否有疑问。
Thanks for your help :D 谢谢你的帮助:D
You hava every thing prety much set just needed to call jscroll at proper time. 你需要在适当的时候调用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'
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.