ASP.NET กับ jQuery: ใส่รูปให้ Bulleted List ได้ในขณะ Runtime

แรงจูงใจ …

อยากเปลี่ยนรูปตรง list ลายละเอียดข้อมูลโดยสลับรูปกันเพื่อความสวยงามด้วยนะ ทำได้มั้ย?

เริ่มต้นทำกันเลย …

1. เพิ่ม page เข้าไป แล้วตั้งชื่อว่า ImgBulletedList.aspx แล้วใส่ code Bulleted List เข้าไปใน form ตามนี้

<form id=”form1″ runat=”server”>
<div align=”center”>
<fieldset style=”width:400px;height:180px;”>
<p>เกาะที่น่าเที่ยวที่สุดในเอเซียตะวันออกเชียงใต้:</p>
<table cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td align=”left”>
<asp:BulletedList ID=”BulletedList1″ runat=”server”>
<asp:ListItem Text=”ภูเก็ต” Value=”Phuket”></asp:ListItem>
<asp:ListItem Text=”ลังกาวี” Value=”Langkawi”></asp:ListItem>
<asp:ListItem Text=”เรดัง” Value=”Redang”></asp:ListItem>
<asp:ListItem Text=”เตียวมัน” Value=”Tioman”></asp:ListItem>
<asp:ListItem Text=”บาหลี” Value=”Bali”></asp:ListItem>
</asp:BulletedList>
</td></tr>
</table>
</fieldset>
</div>
</form>

2. เพิ่ม CSS เตรียม icon ไว้ 2 แบบเพื่อไว้แสดงสลับกัน

<style media=”screen” type=”text/css”>
ul
{
list-style-type:none;
}
.bullet1
{
list-style-image: url(“images/bullet_v1.gif”);
}
.bullet2
{
list-style-image: url(“images/bullet_v2.gif”);
}
</style>

3. ลอง run page ขึ้นมา

เติมกลไกเข้าไป …

1. เติม code ใน scope ของ function $(document).ready ให้ loop แต่ละ Bulleted List

$(“ul li”).each(function() {

2.ใส่ code เพื่อ add class CSS bullet และจำสลับตาม index เมื่อเป็รเลขคู่เป็น class bullet1 และ คี่เป็น class bullet2 เสร็จแล้วให้ปิด scope each และ ready

$(this).addClass($(“ul li”).index(this) % 2 == 0 ? “bullet1” : “bullet2”);

});
});

3. ลอง run page ขึ้นมาหน้าตาของ Bulleted List จะเปลี่ยนไปแบบนี้

… ขอบคุณครับ …

Advertisements

#asp-net, #jquery