Aug
11
2010

jQuery Plugin Timeago!!

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

Comments Off

วันนี้นั่งทำงานเกี่ยวกับ Twitter อยู่มีโจทย์อยู่ว่าให้ดึงเอาข้อความใน Twitter มาโชว์และต้องใส่ไปด้วยว่าข้อความนั้น post ผ่านมากี่วันกี่นาทีแล้ว เลยนึกขึ้นได้ว่า เออ Plugin ของ jQuery ก็มีนี่นาเอามาใช้ประโยชน์ดีกว่า เพราะแต่ก่อนนั้นใช้ PHP ในการคำนวนหา ซึ่งจะเป็นการไปเพิ่มโหลดให้กับ Server ซะเปล่าๆ

ในเมื่อเราทำฝั่ง Client ได้ก็ให้ฝั่ง Client ประมวลผลดีกว่าใหม!! บางคนอาจจะนึกไม่ออกครับ ว่ามันคืออะไร ให้ลองเข้า Facebook หรือ Twitter ดูครับ มันจะมีข้อความประมาณว่า [14 minutes ago ] อะไรประมาณนี้ คือเป็นการบอกว่า Content ที่เรา Post หรือคนอื่น Post ไปนั้น ณ. เวลาปัจจุบัน ผ่านไปนานเท่าไรแล้ว เอาละกดเข้ามาอ่านกันได้เลยครับ..

่jQuery Plugin ตัวนี้ผมก็ได้มาจากการค้นใน Google อีกเช่นเคยครับ
ก่อนอื่นเลยก็ไปโหลด Plugin timeago มาก่อนเลยครับ โหลดได้ที่ Link ด้านล่างนี้

http://timeago.yarp.com/jquery.timeago.js

หลังจากที่โหลดมาแล้วก็อย่างลืมเรื่องของการจัดลำดับการวาง Script นะครับต้องเอา core jQuery ขึ้นก่อนเน้อ

1
2
3
4
5
6

....
<head>
<script src="jquery-latest.min.js"></script>
<script src="jquery.timeago.js"></script>
</head>
....

เอาละหลังจาก include javascript มาแล้วก็พร้อมจะใช้งานแล้ว มาลองกันเลย
ผมจะสมมุติว่าเราได้ดึงเอาข้อมูลจาก Database ขึ้นมาแล้วโชว์ในรูปแบบ HMTL ประมาณนี้นะครับ ระบบเวลาตามตัวอย่างนี้เป็นระบบ ISO 8601 นะครับ หรือใช้เป็น timestamps ก็ได้ครับ

1
2
3
4
5
6
7

<abbr class="timeago" title="2008-07-17">2008-07-17</abbr>

<script>
jQuery(document).ready(function() {
jQuery("abbr.timeago").timeago();
});
</script>

จาก code ด้านบนนี้นะครับ ให้สังเกตุที่ title ตรงนี้นะครับที่ตัว Plugin จะเอาไปทำการแปลงหรือคำนวน ให้เป็น Timeago หลังจากแปลงหรือคำนวนแล้ว จะเอาไปใส่แทนที่ Text ใน Tag abbr ครับ ผลก็จะได้ตามด้านล่างนี้ครับ

1	<abbr class="timeago" title="2008-07-17">2 years ago</abbr>

จะเห็นได้ว่า ตัว Text นั้นจะเปลี่ยนเป็น “2 years ago” ครับ ตัวอย่างอื่นๆตามด้านล่างนี้ น่าจะเข้าใจและเห็นภาพง่ายที่สุดครับ

1
2
3

jQuery.timeago(new Date()); //=> "less than a minute ago"
jQuery.timeago("2008-07-17"); //=> "2 years ago"
jQuery.timeago(jQuery("abbr#some_id")); //=> "2 years ago" // [title="2008-07-20"]

จริงๆแล้ว Plugin ตัวนี้เราสามารถที่จะ Config ค่าต่างๆได้เยอะกว่านี้นะครับ Link อื่นๆที่เกี่ยวข้องสามารถตามไปที่ Link ด้านล่างนี้ได้เลยครับ