PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การเลื่อน แล้วโหลดข้อมูล อัตโนมัติ ด้วย jQuery

24 April 2013 By


ใช้สำหรับโหลดข้อมูลมาแสดงด้วย ajax ด้วยการเช็คตำแหน่งการเลื่อน
ของ scrollbar กับสวนของข้อมูล โดยในที่นี้จะประยุกต์ กรณีเลื่อน scrollbar มายังตำแหน่ง
ล่างสุด หรือใกล้ตำแหน่งล่างสุดของหน้าเพจ 
 
การเทียบกับตำแหน่งล่างสุดของเพจ
    // เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ  	 
	$(window).scroll(function(){
		// 	เปรียบเทียบส่วนของการเลื่อนจากตำแหน่งบน บวกกับส่วนของหน้าต่างข้อมูล
		// ถ้าเท่ากับ ความสูงของเนื้อหาหรือความสูงของเพจนั้นๆ หรือก็คือเมื่อเลื่อนมาตำแหน่งล่างสุด
	   if($(window).scrollTop() + $(window).height() == $(document).height()){
				// ชุดคำสั่งสำหรับทำงาน
	   }
	});
กรณีเทียบแบบใกล้ตำแหน่งล่างสุดของเพจในอีก xxx พิเซล
 
    // เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ  	 
	$(window).scroll(function(){
		// 	เปรียบเทียบส่วนของการเลื่อนจากตำแหน่งบน บวกกับส่วนของหน้าต่างข้อมูล
		// ถ้า มีค่ามากกว่าจุดๆ หนึ่งของตำแหน่งที่ต้องการ ตามตัวอย่างคือใกล้ด้านล่างส่ด อีก 100 พิกเซล
	   if($(window).scrollTop() + $(window).height() > $(document).height() - 100){
				// ชุดคำสั่งสำหรับทำงาน
	   }
	});
ดูโค้ดตัวอย่างทั้งหมด ชื่อไฟล์ load_data_when_scroll.php
 
<?php
if(isset($_GET["load_sample"])){
	echo "<hr>";
	for($i=1;$i<=20;$i++){
		echo "<div>".$i."</div>";
	}
	exit;
}
?>
<!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>
<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>

<div class="main_test">
<?php for($i=1;$i<50;$i++){?>
<div><?=$i?></div>
<?php } ?>
</div>

<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:1},function(data){
			   // นำข้อมูลที่ได้ไปแสดงต่อท้าย ภายใน div id เท่ากับ main_test
		   		$(".main_test").append(data);			   
		   });

	   }
	});	 
	
	
	
});
</script>


</body>
</html>
 

Tags:: ajax jquery php การเลื่อนแล้วโหลด





URL สำหรับอ้างอิง