jQuery Plugin: BlockUI

วันนี้เอา BlockUI มาฝากครับ plugin ของ jQuery อีกหนึ่งตัวที่จะทำให้เว็บไซต์ของเราน่าสนใจมากยิ่งขึ้นครับ ซึ่งในตอนนี้เว็บของเพื่อนๆ หลายคนคงจะนำเอา ajax มาใช้ และในขณะที่ผู้ใช้ของเรากดที่ปุ่มอะไรซักอย่าง จากนั้นเราก็จะโหลดเนื้อหามาแสดงโดยใช้ ajax ซึ่งในขณะที่เรา request ข้อมูลอยู่นี้ อาจจะใช้เวลานิดนึงทำให้ผู้ใช้ของเรานึกว่ามันไม่ทำงาน ก็เลยกดปุ่มอีก บางคนอาจจะกดย้ำๆ จนทำให้เซิฟเวอร์ของเราต้องทำงานหนักได้

เพื่อป้องกันเหตุการณ์แบบนี้ เราก็ทำการ disable ปุ่มนั้นไว้ก่อนจนกว่าเซิฟเวอร์จะส่งข้อมูลกลับมาก็ได้ แต่เพื่อให้ดูน่าสนใจมากขึ้นเราก็นำเอา BlockUI เข้ามาใช้แทนครับ ซึ่งเจ้า BlockUI จะทำให้ผู้ใช้ไม่สามารถกดปุ่มหรือลิงค์อะไรได้ แถมยังมีการสร้างม่านบางๆ (ไม่รู้จะเรียกอะไรครับ) และสามารถแสดงข้อความหรือรูปภาพแสดงให้ผู้ใช้เห็นว่าโปรแกรมกำลังทำงานอยู่อย่าพึ่งทำอะไรนะ

ตัวอย่างการใช้งานก็ง่ายๆครับ

&lt;a id=&quot;showcontent&quot;&gt;Show Content&lt;/a&gt;<br />
&lt;div id=&quot;content&quot;&gt;&lt;/div&gt;</p>
<p>&lt;script type=&quot;text/javascript&quot;&gt;<br />
$('#showcontent').click(function(){<br />
  $.blockUI(); //เรียกใช้ BlockUI<br />
  $.get('content.php',function(res){<br />
    $('#content').html(res);<br />
    $.unblockUI(); //ยกเลิก BlockUI<br />
  });<br />
});<br />
&lt;/script&gt;

เพื่อนๆ สามารถศึกษาลูกเล่นเพิ่มเติมของ plugin ตัวนี้ได้ที่ jQuery BlockUI Plugin ครับ หวังว่าจะเป็นประโยชน์กับเพื่อนๆ นะครับ ^^