有了 jQuery, 我們在撰寫 JavaScript 時可以省下許多力氣。由於在 jQuery 中, 它提供了各式各樣的方法, 可以讓我們很快的找到網頁中的各種元素, 而且不用撰寫很長的程式碼, 所以我們可以利用它來達成以前不容易辦到的事情...
有了 jQuery, 我們在撰寫 JavaScript 時可以省下許多力氣。由於在 jQuery 中, 它提供了各式各樣的方法, 可以讓我們很快的找到網頁中的各種元素, 而且不用撰寫很長的程式碼, 所以我們可以利用它來達成以前不容易辦到的事情。(如果你完全不熟 jQuery, 你可以看看 MSDN 上的 jQuery 邊做邊學系列教學, 這個系列真的做得很棒!)
在這裡我要示範一個很有趣的方法, 把一個 ASP.NET 的 GridView 控制項進行著色, 並加上光棒效果。當然, 同樣的功能也可以以其它簡單的方法達到, 並不一定需要透過 jQuery。我已經說過這只是個示範而已。事實上, 只要我們看懂 jQuery 的運作方式, 就可以了解我們將可以把它運用在其它方面。
在範例網頁中, 我先建立一個 GridView 控制項。這個 GridView 要怎樣讀到資料都無所謂, 只要它能顯示兩個以上的資料列就行了; 也不需要對它進行自動格式化, 更不需要事先設定 Skin。
現在假設這個 GridView 的 ID 叫做 gv。在網列上端加入以下代碼之後, 就可以替這個 GridView 加入幾個功能:
- 每間隔列加上不同的底色, 而底色是在 CSS 中定義
- 加上光棒效果, 而光棒顏色也是在 CSS 中定義
- 為標題列加上特殊的底色或圖樣, 其格式在 CSS 中定義
- 為標題列在 PostBack 時加上一個淡入效果 (Fade In)
- 為頁碼列加上特殊的底色或圖樣, 同樣地, 其格式也是在 CSS 中定義
- 光棒效果不會在標題列和頁碼列生效
- 加上 jQuery 之後, 程式中自動具有 AJAX 效果
- 當滑鼠移過頁碼列的各個頁碼時字會變大
程式碼如下:
<%@ Page Title="首頁" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="TestWeb._Default" %><asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<title>為 GridView/表格 加上光棒效果</title>
<style type="text/css">
.titleBar
{
background-color: #a0ffdd;
background-image: url("../Images/bg.gif");
padding: 6px;
}
.itemBar {}
.alternativeBar
{
background-color: #e3e3e3;
}
.lightBarH
{
background-color: #ffe3e3;
}
.lightBarV
{
background-color: #e3ffff;
}
.lightBarCenter
{
background-color: #1a1a1a;
color: #ffffaa;
}
.pagerBar
{
background-color: #ddff99;
height: 44px;
text-align: center;
padding-left: 6px;
padding-right: 6px;
}
.pageIndexesLarge
{
font-size: xx-large;
font-family: Arial, MS Sans Serif;
background-color: Yellow;
color: Blue;
border: ridge 1px Gray;
}
</style>
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.fn.delay = function (time, callback) {
jQuery.fx.step.delay = function () { };
return this.animate({ delay: 1 }, time, callback);
}var gv = "#gv";
$(function () {
var titleBar = $(gv + " tr:first"); // 找到表格中第一個 tr, 也就是 GridView 的 Title Row
titleBar.attr("type", "titleBar"); // 將 titleBar 本身加上 type 屬性並指定為 titleBar
var titleBarCells = titleBar.children("th").add(titleBar.children("td"));
titleBarCells.addClass("titleBar");
titleBarCells.attr("type", "titleBar"); // 將 titleBar 中所有 td 加上 type 屬性並指定為 titleBar
titleBarCells.hide().fadeIn("slow"); // 當網頁載入時, 讓 titleBar 顯示淡入效果var itemBars = titleBar.siblings().not(":last"); // 找到 Item Rows
itemBars.attr("type", "itemBars"); // 將 itemBars 本身加上 type 屬性並指定為 itemBars
var itemBarsOdd = itemBars.filter(":even"); // 找到 Item Rows 中單數行
itemBarsOdd.addClass("itemBar");
var itemBarsEven = itemBars.filter(":odd"); // 找到 Item Rows 中偶數行
itemBarsEven.addClass("alternativeBar");
var itemBarCells = itemBars.children("td");
itemBarCells.attr("type", "itemBars"); // 將 itemBars 以下各 td 也加上 type 屬性並指定為 itemBars
itemBarCells.mouseover(function (e) { // 指定滑鼠移入時的觸發事件
var td = $(this);
var tr = td.closest("tr");
tr.addClass("lightBarH");
var colIndex = tr.children().index(td) + 1; // 計算事件所在是第幾行
var cols = itemBarsOdd.find("td:nth-child(" + colIndex + ")");
cols.addClass("lightBarV");
td.addClass("lightBarCenter");
});
itemBarCells.mouseout(function (e) { // 指定滑鼠移出時的觸發事件
var td = $(this);
var tr = td.closest("tr");
tr.removeClass("lightBarH");
itemBarCells.removeClass("lightBarH").removeClass("lightBarV").removeClass("lightBarCenter");
});var pagerBar = titleBar.siblings(":last"); // 找到 Pager Row
pagerBar.addClass("pagerBar");
var pageIndexes = pagerBar.find("a"); // 找到各頁碼數字
pageIndexes.mouseover(function (e) { $(e.target).addClass("pageIndexesLarge"); }); // 指定滑鼠移入時的觸發事件
pageIndexes.mouseout(function (e) { $(e.target).removeClass("pageIndexesLarge"); }); // 指定滑鼠移出時的觸發事件});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
歡迎使用 ASP.NET!
</h2>
<p> </p>
<table id="gv" border="1" width="100%">
<tr>
<td colspan="2">
This is header
</td>
</tr>
<tr>
<td>
This is content line 1
</td>
<td>
This is content line 1
</td>
</tr>
<tr>
<td>
This is content line 2
</td>
<td>
This is content line 2
</td>
</tr>
<tr>
<td>
This is content line 3
</td>
<td>
This is content line 3
</td>
</tr>
<tr>
<td>
This is content line 4
</td>
<td>
This is content line 4
</td>
</tr>
<tr>
<td colspan="2">
This is footer - Page <a>1</a> <a>2</a> <a>3</a> <a>4</a>
</td>
</tr>
</table>
<p>
</p>
</asp:Content>
你可以自己把這個範例程式再加以改善或擴充。基本上, 這個範例可以運用在任何使用 Table 元件的控制項 (並不一定得是 ASP.NET 控制項; HTML 也行)。而對於 ListView 這種完全是以樣版組成的控制項, jQuery 會更有發揮的空間。
回到這個範例, 如果把程式改一下, 我們應該可以很容易的為網頁加上動態變更 Theme 的效果 (不是使用 ASP.NET 所提供的 Theme)。我們只需要套用不同的 CSS 設定, 就可以把網頁中所有的 GridView 同時變更外觀。還有, 如果你把這個程式放在 Master Page 裡, 應該可以為網站內第一個表格加上相同的效果 (把程式中 var gv = "#gv"; 改成 var gv = "table"; 即可, 不過程式可能需要看情況稍改一下)。