2009年4月26日星期日

jQuery教學(2) - GridView/Table的slide/fade/animate/Class效果

jQuery的效果其實並不算很多,除了基本的Show/Hide/Toggle,就還有slide / fade / animate 三種。這次依然是用GridView Table做示範,但其實這幾種效果都可以用於其他的HTML element之上,另外還有Add/Remove Class的應用。
有需要可先看看上一次教學 : jQuery教學(1) - GridView/Table中使用Selectors
大家可以先試試效果 :


1. Click一下Row,會把整列Highlight起來。
2. 選取Row後,按Delete按鈕會把Row FadeOut。
3. Double click 藍色的格子會動畫式把文字放大。
4. Double click 粉紅色的格子會把文字摺疊起來。

我想只有toggleClass才需要用一點點文字表達,其他的,相信只放上代碼大家都能看得懂。

toggleClass
1.用Selector+filter把整個Table的cell return,filter的意義並不是把符合的去掉,而是相反地return給jQuery API。
2.再remove所有row的的Class:currRow,確保所有Row都沒有Highlight。
3.最後才把click() event中的row加上currRow class達至選取效果。
    <script type="text/javascript">
        //HighLight Row after mouse click
        $('#gridtable tr').filter(function () {
            return $('td', this).length && !$('table', this).length
        }).click(function () {
            $('#gridtable tr').removeClass("currRow");
            $(this).toggleClass('currRow');
        });
    </script>

fade
    <script type="text/javascript">
        //delete row
        $("#del").click(function () {
            var hideRows = $("#gridtable tr").hasClass("currRow");
            if (hideRows == true) {
                $("#gridtable tr.currRow td").fadeOut(1000);
            }
        });
    </script>

animate & slide
    <script type="text/javascript">
        //animate & slide 
        //Only td with div inside will be select.
        //title="ani" is the flag for animate.
        $('#gridtable tr td div').dblclick(function () {
            if ($(this).attr('title') == 'ani') {
                $(this).animate({
                    width: "100%",
                    opacity: 0.4,
                    marginLeft: "0in",
                    fontSize: "50px",
                    borderWidth: "10px"
                }, 1500);
            } else {
                $(this).slideToggle("slow");
            }
        });
    </script>

大家可見其實,透過jQuery去做這些效果並不複雜。其實WordPress中的Admin頁上,或者很多Web 2.0網站上,大家都看到很多類似的效果。

完整的網頁HTML碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>亞特蘭提斯 Net Atlantis - jQuery教學(2) - GridView/Table的slide/fade/animate效果</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //HighLight Row after mouse click
            $('#gridtable tr').filter(function () {
                return $('td', this).length && !$('table', this).length
            }).click(function () {
                $('#gridtable tr').removeClass("currRow");
                $(this).toggleClass('currRow');
            });

            //delete row
            $("#del").click(function () {
                var hideRows = $("#gridtable tr").hasClass("currRow");
                if (hideRows == true) {
                    $("#gridtable tr.currRow td").fadeOut(1000);
                }
            });

            //animate & slide
            //Only td with div inside will be select.
            //title="ani" is the flag for animate.
            $('#gridtable tr td div').dblclick(function () {
                if ($(this).attr('title') == 'ani') {
                    $(this).animate({
                        width: "100%",
                        opacity: 0.4,
                        marginLeft: "0in",
                        fontSize: "50px",
                        borderWidth: "10px"
                    }, 1500);
                } else {
                    $(this).slideToggle("slow");
                }
            });

        });
    </script>
    <style type="text/css">
        body
        {
            font: small arial;
        }
        tr:first-child
        {
            background-color: #F5F5DC;
        }
        tr:first-child:hover
        {
            background-color: #F5F5DC;
        }
        tr:hover
        {
            background-color: #E8FFEC;
            cursor: pointer;
        }
        td
        {
            border: #ccc 1px solid;
            text-align: center;
            width: 100px;
        }
        td:hover
        {
            background-color: #E8FFEC;
            border: #666 1px solid;
            width: 100px;
            cursor: pointer;
        }
        .currRow
        {
            background-color: #F0BD00;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table id="gridtable">
    <tr>
    <th>Product id</th><th>Console Name</th><th>Colour</th>
    </tr>
    <tr>
    <td><div title="ani"  style="background-color:#ADD8E6">1</div></td><td>Play Station 3</td><td>Black</td>
    </tr>
    <tr>
    <td>4 </td><td>Xbox 360</td><td><div title="ani" style="background-color:#ADD8E6">White</div></td>
    </tr>
    <tr>
    <td>11 </td><td><div title="slide" style="background-color:#FFB6C1">NDSL</div></td><td>Red</td>
    </tr>
    <tr>
    <td>18</td><td>PSP</td><td><div title="slide" style="background-color:#FFB6C1">Silver</div></td>
    </tr>
    <tr>
    <td>26</td><td><div title="ani" style="background-color:#ADD8E6">Wii</div></td><td>White</td>
    </tr>
    </table>
    <button id="del" type="button">Delete Selected Row</button>
    <button id="reload" type="button" onclick="window.location.reload()">Reload Table</button>
</body>
</html>

3 則留言:

  1. 張大大:
    小弟剛學Jquery而已,所以看的有些吃力。
    本篇的這一行,看不懂,可以再說明一下嗎?
    $('#gridtable tr').filter(function() {
    return $('td', this).length && !$('table', this).length
    }).click(function() {
    $('#gridtable tr').removeClass("currRow");
    $(this).toggleClass('currRow');
    });
    Q1:filter 是將tr元素中的某一些class取出對嗎?
    Q2:return 的用法是指$('td', this).length && !$('table', this).length的回傳值嗎?
    Q3: 一般$(selectors);中的selectors不都是單一值嗎? $('td', this) 這個是什麼意思呢?
    Q4: 那$('td', this).length && !$('table', this).length 這是表示 td,this的個數 且不等於 table,this的個數嗎? 看不懂,用猜的,sorry
    Q5:接著click(function() {.....這段,可以看出前面retrun出來的應該是一個個的tr,所以Q4的推論好像不對了,愈來愈不明....
    請多指導了,感謝您!

    回覆刪除
  2. Re:Mitchell Hu
    Q1.代碼中, Filter的意思是取出td的collection.

    Q2.這是jQuery中的inline function, return用純粹用作回存filter後的td

    Q3. javascript中的Selector不是單一值,例如Javascript中GetElementsByName或GetElementByTagName就已經是collection,而jQuery中的selector亦是同一道理.
    $(’td’, this),this 意思是Table中的tr, 所以整句可以理解為"Table中的tr的td".

    Q4,Q5.意思是這樣,但這是用作合乎條件以回存td

    其實我這個例子對初學者而言或者是比較難明,我個人推薦可以參考官網的例子,再回來看看我的,就會明白.
    http://docs.jquery.com/Traversing/filter

    回覆刪除
  3. 謝謝網主的分享,請問一下如果想click的時候變成選取1整 colomn 而不是 row 的話,可以怎樣做呢?

    回覆刪除