ASP.NET กับ jQuery: การเปลี่ยนรูปแบบของ cursor เมื่อมีการชี้ mouse ไปที่ row ของ GridView

เกริ่นนำ

บทความนี้ผมจะแสดงวิธีเปลี่ยนรูปแบบของ cursor ที่ชี้บน row ของ GridView โดยจะสลับรูปแบบของ cursor ไปมาระหว่าง row คู่(even) กับ row คี่(odd)

ผลลัพย์ที่เสร็จแล้ว

เหตุผลที่มา

1. download GridView เพื่อมาเติมกลไกต่อจาก SourceCode

2. ใส่กลไก jQuery ใน code javascript block ไปตามขั้นตอน ดังนี้

2.1 ใน document.ready()  function (หรือ $(function ()) ) ของ jQuery script block ใช้ jQuery selector สืบค้น row ของ GridView1 แล้ว filter เอาเฉพาะ row คู่เท่านั้น เพื่อผูก(bind) event mouseover ด้วย function ที่กำหนด cursor ในรูปแบบ pointer(เป็นรูป icon นิ้วมือชี้ ดูรูป ผลลัพย์ที่เสร็จแล้ว )

$(function () {
$(“#<%=GridView1.ClientID%> tr”).filter(“:even”).bind(“mouseover”, function () {
$(this).css(“cursor”, “pointer”);
});

2.2 บรรทัดต่อมา ให้ ใช้  jQuery selector เหมือนข้อ 2.1 แต่ให้ผูก(bind) event mouseover ด้วย function ที่กำหนด cursor ในรูปแบบ pointer(เป็นรูป icon load กลมๆดูรูป ผลลัพย์ที่เสร็จแล้ว ) และเมื่อจบ function นี้แล้วให้ปิด scope ของ ready function ครับ
$(“#<%=GridView1.ClientID%> tr”).filter(“:odd”).bind(“mouseover”, function () {
$(this).css(“cursor”, “wait”);
});
});

สรุป code กลไกที่เสร็จสมบูรณ์แล้ว ได้แบบนี้

<script src=”js/jquery-1.6.1.min.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
$(function () {
$(“#<%=GridView1.ClientID%> tr”).filter(“:even”).bind(“mouseover”, function () {
$(this).css(“cursor”, “pointer”);
});
$(“#<%=GridView1.ClientID%> tr”).filter(“:odd”).bind(“mouseover”, function () {
$(this).css(“cursor”, “wait”);
});
});
</script>

เสร็จแล้วครับ การเปลี่ยนรูปแบบของ cursor เมื่อมีการชี้ mouse ไปที่ row ของ GridView

ขอบคุณครับ 😉

จริงๆแล้วรูปแบบที่ซับซ้อนนั้น ประกอบมาจากรูปแบบที่เรียบง่ายหลายๆชิ้น

แต่ที่เรายังคงคิดว่ารูปแบบมันซับซ้อนเกินกว่าจะเข้าใจได้ มันเป็นเพราะว่่า

เราไม่เคยพยายามทำความเข้าใจรูปแบบที่เรียบง่ายนั้นก่อน รูปแบบที่ซับซ้อน

Chav:P

Advertisements

#asp-net, #javascript, #jquery