[英]How to implement jScroll?
我是JS和jQuery的初學者,所以請耐心等待。
我試圖使用JS創建一個動態列表<ul>
,最后它的工作。 現在我需要使用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
怎么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'
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.