php 无限滚动加载,“无限”与jQuery滚动加载更多内容分页——w3cdream|前端学习-开发...

分页数量,在许多方面,计数器为用户直观和费时。他们必须停止,点击一个数字,等待页面加载,然后继续搜索。一些网站,如facebook已经决定退出这个概念的分页系统自动加载内容作为用户卷轴。在本教程中我们将做什么。

它是如何工作的

我已经创建了一个小插件,允许我们实现我们的目标。简而言之插件检查用户是否您所指定的容器的底部并加载相应的更多内容。然后这些数据被发送到一个ajax文件处理的帖子显示什么。

// Check the user is at the bottom of the element

if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {

// Now we are working, so busy is true

busy = true;

// Tell the user we're loading posts

$this.find('.loading-bar').html('Loading Posts');

// Run the function to fetch the data inside a delay

// This is useful if you have content in a footer you

// want the user to see.

setTimeout(function() {

// This is the Ajax function

getData();

}, $settings.delay);

}

这里的关键线路if($(window).scrollTop() + $(window).height() > $this.height() ..。这基本上是说,如果用户滚动位置大于目标元素的高度,那么更多的元素应该加载。

Ajax是什么?

Ajax是我们如何发送数据,当一个事件发生在javascript文件。例如,当我们想发送一些数据滚动到另一个文件来找出该做什么。该文件通常是一个PHP文件将处理数据发送,然后你可以从数据库获取信息。那么,我们如何与jQuery这样做?因为我们发布数据,我们使用$.post功能。它看起来有点像这个:

$.post('file.php', {

information : 'to be sent',

to : 'file'

}, function(data) {

}

});

所以在上面的例子中我们结束的信息(这一点在第一组花括号)文件,file.php。发送信息时,它将返回一些信息的形式的数据变量,然后,我们可以使用这些数据通过Javascript信息返回给用户。

ajax文件

ajax文件将不得不被定制以满足您的需要。所有你要做的就是抓住一些信息从您选择的MySQL数据库和一些PHP。我已经创建了一个非常基本的ajax。php文件,获取信息从一个wordpress MySQL数据库并显示内容与标题和链接。这看上去有点像,但它将被包含在上面的下载链接下载文件。

mysql_connect('localhost', 'username', 'password') or die();

mysql_select_db('database');

$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();

$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();

$run = mysql_query("SELECT * FROM wp_posts WHERE post_status = 'publish' AND post_type ='post' ORDER BY id DESC LIMIT ".$postnumbers." OFFSET ".$offset);

while($row = mysql_fetch_array($run)) {

$content = substr(strip_tags($row['post_content']), 0, 500);

echo '

'.$row['post_title'].'

';

echo '

'.$content.'...

';

}

?>

使用插件

一旦您的ajax文件整理,只是运行插件。有一群变量可以确定,但是重要的是你定义的查询如果你使用原来的ajax。上面列出的php文件。

运行该插件上传的所有文件和创建一个容器在HTML#content或任何你想要打电话给你的容器。然后运行插件。简单!

$(document).ready(function() {

$('#content').scrollPagination({

nop : 10, // The number of posts per scroll to be loaded

offset : 0, // Initial offset, begins at 0 in this case

error : 'No More Posts!', // When the user reaches the end this is the message that is

// displayed. You can change this if you want.

delay : 500, // When you scroll down the posts will load after a delayed amount of time.

// This is mainly for usability concerns. You can alter this as you see fit

scroll : true // The main bit, if set to false posts will not load as the user scrolls.

// but will still load if the user clicks.

});

});

在下载你会发现文件需要我展示了你的一切。因为我不能包括数据库细节你需要提供自己的ajax,您可以编辑。php文件。这就是它!有一个美好的一天!