วันนี้เอา BlockUI มาฝากครับ plugin ของ jQuery อีกหนึ่งตัวที่จะทำให้เว็บไซต์ของเราน่าสนใจมากยิ่งขึ้นครับ ซึ่งในตอนนี้เว็บของเพื่อนๆ หลายคนคงจะนำเอา ajax มาใช้ และในขณะที่ผู้ใช้ของเรากดที่ปุ่มอะไรซักอย่าง จากนั้นเราก็จะโหลดเนื้อหามาแสดงโดยใช้ ajax ซึ่งในขณะที่เรา request ข้อมูลอยู่นี้ อาจจะใช้เวลานิดนึงทำให้ผู้ใช้ของเรานึกว่ามันไม่ทำงาน ก็เลยกดปุ่มอีก บางคนอาจจะกดย้ำๆ จนทำให้เซิฟเวอร์ของเราต้องทำงานหนักได้
เพื่อป้องกันเหตุการณ์แบบนี้ เราก็ทำการ disable ปุ่มนั้นไว้ก่อนจนกว่าเซิฟเวอร์จะส่งข้อมูลกลับมาก็ได้ แต่เพื่อให้ดูน่าสนใจมากขึ้นเราก็นำเอา BlockUI เข้ามาใช้แทนครับ ซึ่งเจ้า BlockUI จะทำให้ผู้ใช้ไม่สามารถกดปุ่มหรือลิงค์อะไรได้ แถมยังมีการสร้างม่านบางๆ (ไม่รู้จะเรียกอะไรครับ) และสามารถแสดงข้อความหรือรูปภาพแสดงให้ผู้ใช้เห็นว่าโปรแกรมกำลังทำงานอยู่อย่าพึ่งทำอะไรนะ
ตัวอย่างการใช้งานก็ง่ายๆครับ
<a id="showcontent">Show Content</a>
<div id="content"></div>
<script type="text/javascript">
$('#showcontent').click(function(){
$.blockUI(); //เรียกใช้ BlockUI
$.get('content.php',function(res){
$('#content').html(res);
$.unblockUI(); //ยกเลิก BlockUI
});
});
</script>
เพื่อนๆ สามารถศึกษาลูกเล่นเพิ่มเติมของ plugin ตัวนี้ได้ที่ jQuery BlockUI Plugin ครับ หวังว่าจะเป็นประโยชน์กับเพื่อนๆ นะครับ ^^