星期二, 10月 21, 2008

(簡單範例)用jquery幫listview加顏色和光棒

最近常常在用listview這個control..因為它自由度高然後render出來後的html又很乾淨..剛剛簡單的幫listview穿上美美的衣服..大家看code就災啦..Open-mouthed..

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.item
{
background-color: lime;
}
.alternatingItem
{
background-color: aqua;
}
</style>
<script src="js/jquery-1.2.6-intellisense.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="ListView1" runat="server">
<LayoutTemplate>
<table id="table1">
<thead>
<tr>
<td>
ProductName
</td>
<td>
UnitPrice
</td>
</tr>
</thead>
<tbody>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Literal ID="Literal1" runat="server"
Text='<%# Eval("ProductName") %>'></asp:Literal>
</td>
<td>
<asp:Literal ID="Literal2" runat="server"
Text='<%# Eval("UnitPrice") %>'></asp:Literal>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#table1>tbody>tr:even').addClass('item');
$('#table1>tbody>tr:odd').addClass('alternatingItem');
$('#table1>tbody>tr').hover(
function() { $(this).css("background-color", "yellow"); },
function() { $(this).removeAttr('style'); }
);
});
</script>
</body>
</html>

結果:

dfsdc

用jquery來使listview穿上美美的衣服還真簡單..參考一下ㄅ..Vampire BatVampire BatVampire BatVampire BatVampire BatVampire BatVampire Bat..

參考:

1 則留言:

克勞迪奧~ 提到...

顏色配的不好看,不過你不是學設計的
就放過你吧XD
cloudio