เพิ่มลูกเล่น การแสดงข้อมูล เลื่อนสลับบน ล่าง คล้าย twitter ด้วย jQuery
22 December 2010ตัวอย่างต่อไปนี้เป็นแนวทาง สำหรับเพิ่มลูกเล่นให้กับเว็บไซต์ สามารถนำไปประยุกต์
กับการใช้งานข้อมูลจากฐานข้อมูลมาแสดง โดยในตัวอย่างเป็นแสดงข้อมูลคร่าวๆ เท่านั้น
การตกแต่ง และการปรับเปลี่ยน ให้เป็นไปตามต้องการ
ตัวอย่าง
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
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
05 Jul 09 สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax อ่าน 15300 07 Sep 10 ใช้ ckeditor กับ filemanager ด้วย php รองรับ ฟังก์ชัน javascript อ่าน 4036 22 Mar 11 การกำหนด แท็ก html ในตัวแปร JavaScript อย่างง่าย อ่าน 2278 05 Feb 09 เพิ่มลูกเล่นการโหวด Vote หรือ Rating ด้วย jQuery และ CSS อ่าน 4585 20 Dec 09 ประยุกต์การทำ overlay เพจ กับกล่องข้อความ ด้วย jQuery อ่าน 5326 03 Nov 08 เก็บ HTML ไว้ในตัวแปร PHP อย่างง่ายด้วยฟังก์ชัน ob_start() อ่าน 3386 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 4238 21 Aug 10 เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ อ่าน 4403 18 Oct 08 รู้จักการใช้งานฟังก์ขัน after() ใน jquery อ่าน 3046 23 Dec 09 จัดรูปแบบ การแบ่งคอลัมน์ column ของ ตาราง สำหรับแสดงข้อมูล ด้วย php อ่าน 4572 21 Oct 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อนขึ้น เลื่อนลง คล้าย marquee แนวตั้ง อ่าน 2860 20 Mar 10 ใช้ jQuery สร้าง การเลื่อนโฟกัส ของ textbox ด้วยลูกศร บนแป้นพิมพ์ คีบอร์ด keyboard อ่าน 3505 06 May 10 สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่าย อ่าน 4790 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1 อ่าน 6823 04 Nov 08 สร้าง RSS บทความหรือข่าวสาร ด้วย PHP อ่าน 3675 03 Dec 10 ทบทวน การขึ้น บรรทัดใหม่ ใน textarea ด้วย Special Characters in HTML อ่าน 2605 05 Nov 08 CSS สร้างเมนูแนวตั้ง 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 10700 03 Nov 08 เปิด popup แล้วให้แสดงแบบ maximize อ่าน 5293 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 20166 31 Mar 09 ดึงข้อมูลจากฐานข้อมูลเป็น excel ด้วย php รองรับภาษาไทย อ่าน 6721