เพิ่มลูกเล่น การแสดงข้อมูล เลื่อนสลับบน ล่าง คล้าย twitter ด้วย jQuery

22 December 2010 เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee

jquery แสดงข้อมูล twitter

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery แสดงข้อมูล twitter

ตัวอย่างต่อไปนี้เป็นแนวทาง สำหรับเพิ่มลูกเล่นให้กับเว็บไซต์ สามารถนำไปประยุกต์
กับการใช้งานข้อมูลจากฐานข้อมูลมาแสดง โดยในตัวอย่างเป็นแสดงข้อมูลคร่าวๆ เท่านั้น
การตกแต่ง และการปรับเปลี่ยน ให้เป็นไปตามต้องการ

ตัวอย่าง

Header

This is a test test 10

This is a test test 9

This is a test test 8

This is a test test 7

This is a test test 6

This is a test test 5

This is a test test 4

This is a test test 3

This is a test test 2

This is a test test 1

This is a test test 0

ตัวอย่างโค้ดทดสอบทั้งหมด

<!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>slide up slide down and fade</title>
<style type="text/css">
body{
	background-color:#0E97C5;	
}
/* css ส่วนนอกสุดของเนื้อหานี้ */
div#holder_swap{
	margin:auto;
	width: 519px;
	margin-top:50px;
	background-color:#FFF;		
}
/* css ส่วนกำหนดขอบเขตการแสดง  */
div.wrap_swap{
	width: 519px;
	height: 854px; 
	color: #5A5858;
	display: block;
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;	
}
/* css ส่วนสำหรับหัวข้อ  */
div.heading{
	border-bottom:1px black dotted;
	margin:0;
	padding:10px 0px 3px;
	width: 519px;
	height:16px;
	clear: both;
	color: #5A5858;
	display: block;	
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
	font-weight:bold;	
	background-color:#FFF;		
}
/* css ส่วนสำหรับรายการแสดงแต่ละรายการ */
div.item_swap{
	border-bottom:1px black dotted;
	margin:0;
	padding:10px 0px 3px;
	width: 519px;
	height:60px;
	clear: both;
	color: #5A5858;
	display: block;	
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
</style>
</head>

<body>


<!--ส่วนของเนื้อหาสำหรับทดสอบ-->
<div id="holder_swap">
    <div class="heading">
         Header 
    </div>
    <div class="wrap_swap">
    	<?php
//		ตัวอย่างนี้ แสดงรายการเริ่มต้น ทั้งหมด 30 รายการเมื่อโหลดข้อมูลมาครั้งแรก
//		โดยจะทำการซ่อนข้อมูลที่มีค่า index มากกว่า 10 ไว้ก่อน แล้วจะค่อยนำมาแสดง
//		ตามจังหวะเวลาที่กำหนด		
		?>
        <?php for($i=29;$i>=0;$i--){ ?>
        <div id="recent<?=$i?>" style="display:<?=($i<11)?"block":"none"?>;" class="item_swap" >
        This is a test test <?=$i?>
        </div>
        <?php } ?>
    </div>
</div>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var delay = 5000; // ลูกเล่นทำงานทุกๆ 5 วินาที
var count = 30; // จำนวนรายการที่นำมาแสดงทั้งหมด
var showing = 11; //  สำหรับ index ค่าของรายการที่จะแสดงเริ่มต้น  สอดคล้องกับ $i<11
var i = 0; // เก็บค่า index รายการ
var shift_box;    //  สำหรับเก็บฟังก์ฃัน การเลื่อนสลับ แสดง
var move_box; // สำหรับเก็บฟังก์ฃันซ่อนรายการ
function move_box(i){
	return function() {
	  $('#recent'+i).remove().css('display', 'none').prependTo('.wrap_swap');
	}
}
function shift_box() {
	var toShow = (i + showing) % count; // วนลูปเพิ่ม ลด index ลำดับค่ารายการที่จะแสดง ได้ค่าระหว่าง 0-29
	// ลูกเล่นส่วนที่จะแสดง
	$('#recent'+toShow).slideDown(1000,move_box(i));
	// ลูกเล่น ส่วนที่จะทำการซ่อน
	$('#recent'+i).slideUp(1000,move_box(i));
	i = (i + 1) % count; // วนลูปเพิ่มลด ค่า i จะได้ค่าตั้งแต่ 0-29
	setTimeout('shift_box()', delay); // กำหนดให้ทำงานหลังจาก 5 วินาที
}    

$(function(){
	 setTimeout('shift_box()', delay); // กำหนดให้ทำงานหลังจาก 5 วินาที
});
</script>

</body>
</html>

ความสูงของส่วนของรายการที่แสดงที่กำหนดใน css ในที่นี้กำหนดเท่ากับ 854px
โดยกำหนดภายใต้ขอบเขตดังนี้
- แต่ละรายการสูง 60px มี 11 รายการที่แสดงเริ่มต้น ความสูงรวม 660px
- แต่ละรายการข้อมูลขยับเข้าด้านในจากดานบน 10px และด้านล่างอีก 3px
และมี 11 รายการจะได้ความสูงจะนำมาบวกเพิ่มเท่ากับ 143px
- หัวข้อ header สูง 16px
- ความสูงรวมเท่ากับ 819px
- +- ค่าข้อมูลบางรายการที่มีความยาว อีก 35px จึงได้ 854px
** 35px +- กำหนดได้เองตามความเหมาะสม แต่อย่างน้อยความสูงสุดท้ายต้องมากกว่า 819px

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ