|
 |
| |
การโหลดข้อมูลเมื่อเลื่อน scrollbar ( เหมือน facebook ) ทำยังไง? |
| |
 |
|
|
 |
 |
|
ตัวอย่าง
http://www.bangqok.com/dir/Beauty
ช่วยหาวิธีแบบเว็บนี้ให้หน่อยครับ
การทำงานจะโหลดเนื้อหามาตามที่กำหนด หรือเต็มหน้าจอ
พอเลื่อนสกอบาร์ลง จะโหลดเนื้อหามาเพิ่ม เหมือน fb
ลองทำตามลิงค์ข้างล้างนี้แล้ว
http://www.ninenik.com/content.php?arti_id=442
โหลดมาได้ ครั้งแลก พอครั้งต่อไปมันก็ซ้ำ
load_sample:1 ผมอยากให้มันเพิ่มค่าไปเลื่อยๆ เช่น load_sample:1 พอโหลดครั้งต่อไป load_sample:2 >> load_sample:3
ผมต้องทำยังไงครับ
ใน if(isset($_GET["load_sample"])){ ผมก็เอาค่ามา + กันแล้วเอาค่าไปใส่ก็ยังไม่ได้
ผมพยายามเอามาประยุคใช้ดึงจากฐานข้อมมูลแล้วมันก็จะโหลดแต่ข้อมูลซ้ำๆ ขึ้นมา เพราะค่า load_sample:1 มันเพิ่มไม่ได้ 3 วันแล้วหาทางยังไม่ได้ช่วยแนะนำหน่อยครับ
หรือมีวิธีอื่นแนะนำ ช่วยชี้แนะด้วยครับ
ขอบคุณครับ
ตัวอย่าง scroll1.php ชื่อไฟล์โค้ดตัวอย่างทั้งหมด
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>load data when scroll bottom</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
html,body{
background-color:#CCC;
padding:0px;
margin:0px;
}
div.main_test{
position:relative;
background-color:#EAE1EA;
margin:auto;
width:800px;
}
</style>
</head>
<body>
<!--script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script-->
<script type="text/javascript">
$(function(){
// เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ
$(window).scroll(function(){
// เปรียบเทียบส่วนของการเลื่อนจากตำแหน่งบน บวกกับส่วนของหน้าต่างข้อมูล
// ถ้าเท่ากับ ความสูงของเนื้อหาหรือความสูงของเพจนั้นๆ หรือก็คือเมื่อเลื่อนมาตำแหน่งล่างสุด
if($(window).scrollTop() + $(window).height() == $(document).height()){
// ในที่นี้ทดสอบการดึงข้อมูลด้วย get อย่างง่าย
// $.get("load_data_when_scroll.php",{load_sample:3},function(data){
<?php
if(isset($_GET["load_sample"])){
$xx=$_GET["load_sample"];
$more_page=$xx+1;
?>
$.get("scroll1.php",{load_sample:<? echo $more_page?>},function(data){
<?
}else{?>
$.get("scroll1.php",{load_sample:1},function(data){
<? }
//exit;
?>
//$.get("scroll1.php",{load_sample:<?=$more_page?>},function(data){
// นำข้อมูลที่ได้ไปแสดงต่อท้าย ภายใน div id เท่ากับ main_test
$(".main_test").append(data);
});
}
});
});
</script>
<?
if(isset($_GET["load_sample"])){
echo "<hr>";
for($i=1;$i<=20;$i++){
echo "<div>".$i."=".$_GET["load_sample"]."</div>";
}
$xx=$_GET["load_sample"];
$more_page=$xx+1;
echo 'more_page+xx+1='.$more_page.'<br>';
exit;
}else{
?>
<div class="main_test">
<?php for($i=1;$i<50;$i++){?>
<div><?=$i?></div>
<?php }
?>
</div>
<?
}
?>
</body>
</html>
Tag : PHP, JavaScript, Ajax, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2013-05-06 11:43:54 |
By :
tawanc2005 |
View :
5517 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
 เงียบเลย!
|
| |
|
|
| |
| Date :
2013-05-07 16:20:40 |
By :
tawanc2005 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 01
|
