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