在Twitter引导页面中无限滚动 [英] infinite scroll in twitter bootstrap page

问题描述

< script type =text / javascript>

$（function（）{

$（'＃content'）。scrollPagination（{

'contentPage'：'democontent.html'，//你获取结果的网址

'contentData'：{}，//这些是你可以传递给的变量请求，例如：children（）。size（）知道你是哪个页面

'rollTarget'：$（窗口），//谁会滚动？在这个例子中，完整的窗口

'heightOffset'：10，//它会在页面结束前滚动为10像素时请求

'afterLoad'：function（）{//在加载函数之前，你可以显示预加载器div

$（'#loading'）。fadeIn（）;

}，

'afterLoad'：function（elementsLoaded ）{//加载内容后，您可以使用此功能为新元素设置动画

$（'#loading' ）.fadeOut（）;

var i = 0;

$（elementsLoaded）.fadeInWithDelay（）;

if（$（'＃ content'）。children（）。size（）> 100）{//如果已经加载了100多个结果，则停止分页（仅用于测试）

$（'＃nomoreresults'）。fadeIn（）;

$ （'#content'）。stopScrollPagination（）;

}

}

}）;



//按元素逐渐淡化的代码

$ .fn.fadeInWithDelay = function（）{

var delay = 0;

返回this.each（function（）{

$（this）.delay（delay）.animate（{opacity：1}，200）;

延迟+ = 100;

}）;

};



}）;

解决方案

（function（）{

（'＃content'）。scrollPagination（{

'contentPage'：'democontent.html'，//你获取结果的网址

'contentD ata'：{}，//这些是你可以传递给请求的变量，例如：children（）。size（）来知道你是哪个页面

'rollTarget'：

（窗口），//谁会滚动？在这个例子中，完整的窗口

'heightOffset'：10，//它会在页面结束前滚动为10像素时请求

'afterLoad'：function（） {//在加载函数之前，您可以显示预加载器div

<script type="text/javascript">
$(function () {
$('#content').scrollPagination({
'contentPage': 'democontent.html', // the url you are fetching the results
'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function () { // before load function, you can display a preloader div
$('#loading').fadeIn();
},
'afterLoad': function (elementsLoaded) { // after loading content, you can use this function to animate your new elements
$('#loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
if ($('#content').children().size() > 100) { // if more than 100 results already loaded, then stop pagination (only for testing)
$('#nomoreresults').fadeIn();
$('#content').stopScrollPagination();
}
}
});

// code for fade in element by element
$.fn.fadeInWithDelay = function () {
var delay = 0;
return this.each(function () {
$(this).delay(delay).animate({ opacity: 1 }, 200);
delay += 100;
});
};

});

解决方案

(function () {

('#content').scrollPagination({
'contentPage': 'democontent.html', // the url you are fetching the results
'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget':

(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function () { // before load function, you can display a preloader div

这篇关于在Twitter引导页面中无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！