เอาล่ะครับวันนี้มาแนะนำ plugin ตัวแรกกัน ซึ่ง plugin ตัวนี้รับรองได้ 100% ว่าเพื่อนๆ จะหาจากที่ไหนไม่ได้นอกจาก jQueryTips แห่งเดียว เพราะผมเขียนมาเอง อิอิ

สำหรับ plugin ตัวนี้เอาไว้ทำ flush message ที่นิยมใช้ในระบบ shoutbox หรือ news update เป็นต้น รูปร่างหน้าตาเป็นยังไง คลิกไปดูตัวอย่างกันก่อน

http://www.jquerytips.com/example/flush/

ใครสนใจก็ลองดาวน์โหลดไปใช้กันได้ที่
Download

สำหรับการทำงานของ plugin ตัวนี้จะ ทำงานร่วมกับ json คือจะไปดึงค่ามาจาก path ที่ระบุไปเช่น

$(document).ready(function() {
$(".msg").flushMsg('messages.php', { delay: 5000, fspeed: 1000 });
});

ตรงนี้เป็นการระบุว่าให้ไปดึงข้อมูลจาก messages.php ซึ่งข้อมูลใน messages.pbp จำเป็นต้องอยู่ในรูปแบบ json ส่วนการดึงข้อมูลจะใช้ ajax มาเป็นตัวทำงาน ข้อมูลจะถูกดึงใหม่ทุกครั้งที่ flush ครบรอบ ถ้าไม่ได้ใส่ parameter max ไว้ก็จะ flush จนหมดจากที่มี

messages.php
header("Content-type: text/html; charset=utf-8");
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");

$msgs = array(
'jQuery: The Write Less, Do More JavaScript Library.’,
‘When jQuery came out back in January 2006, my first impression was that it was a cute hack.’,
‘JQuery is a flexible, query-based source code browser, developed as an Eclipse plug-in’,
‘jQuery is a JavaScript library that helps simplify your JavaScript and Asynchronous JavaScript.’,
);

echo json_encode($msgs);
?>

จะเห็นได้ว่าเราใช้คำสั่ง json_encode ในการแปลง array มาเป็นรูปแบบ JSON แต่ว่าคำสั่งนี้จะใช้ได้ใน php5 ขึ้นไปเท่านั้นรวมทั้งยังต้องลง ext ของ JSON อีกด้วย อ้าวแล้วทีนี้ php4 ทำไง ไม่ต้องห่วงครับเดี๋ยวนี้มีตัวช่วยเยอะ เราก็เปลี่ยนมาใช้พวก PEAR แทนก็ได้ อย่าง ลองไปดูก่อนที่นี่

Service JSON

ซึ่งการทำงานก็เพียงแค่ include core file เข้ามาแล้วเรียกใช้ได้เลยเช่นจาก

echo json_ecode($msgs);

ก็เปลี่ยนเป็น

include "JSON.php";
$json = new Service_JSON();
echo $json->encode($msgs);

เท่านี้ก็ใช้งานได้เหมือนกันแล้วครับ ส่วนจะเอา plugin ตัวนี้ไปใช้งานยังไงก็ตามสะดวกครับ ไปประยุกต์เอาเอง ^_^

Ajax, Plugins, jQuery