Подгрузка сообщений как на твиттер

Твиттер и Фейсбук используют хороший метод для загрузки более старых сообщений, вы нажимаете на кнопку "ещё". И вы получите список еще 10 сообщений.
Подгрузка сообщений как на твиттер

Создаем базу
Для создания базы данных выполните следующий sql запрос через phpmyadmin
CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
message TEXT
);

javascript код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() 
{
$('.more').live("click",function() 
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');

$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ ID, 
cache: false,
success: function(html){
$("ol#updates").append(html);
$("#more"+ID).remove(); // removing old more button
}
});
}
else
{
$(".morebox").html('The End');// no results
}

return false;
});
});
</script>

loadmore.php
<div id='container'>
<ol class="timeline" id="updates">

<?php
include('config.php');
$sql=mysql_query("select * from messages ORDER BY msg_id DESC LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li>
<?php echo $message; ?>
</li>
<?php } ?>
</ol>

//More Button here $msg_id values is a last message id value.
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $msg_id; ?>">more</a>
</div>

</div>

ajax_more.php
limit 9 - отвечает за то что будет выводиться по 9 сообщений.
<?php
include("config.php");
if(isSet($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$lastmsg=mysql_real_escape_string($lastmsg);
$result=mysql_query("select * from messages where msg_id<'$lastmsg' order by msg_id desc limit 9");
while($row=mysql_fetch_array($result))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li>
<?php echo $message; ?>
</li>
<?php
}
?>

//More Button here $msg_id values is a last message id value.
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" id="<?php echo $msg_id; ?>" class="more">more</a>
</div>
<?php
}
?>

Украсим css стилем
*{ margin:0px; padding:0px }
ol.timeline
{ 
list-style:none
}
ol.timeline li
{ 
position:relative;
border-bottom:1px #dedede dashed; 
padding:8px; 
}
.morebox
{
font-weight:bold;
color:#333333;
text-align:center;
border:solid 1px #333333;
padding:8px;
margin-top:8px;
margin-bottom:8px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.morebox a{ color:#333333; text-decoration:none}
.morebox a:hover{ color:#333333; text-decoration:none}
#container{margin-left:60px; width:580px }
Теги:
Подгрузка сообщений
Добавлено: 20 Мая 2018 07:15:26 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...