JavaScript與ASP.NET圓舞曲之四: jQuery妙用無窮

js忍之道 js原創

賽門 2012-07-18 17:58:05 ‧ 5803 瀏覽

分享至

從前一個jQuery的例子來看, 似乎把jQuery的功能看低了.

其實, jQuery的功用還很多, 而且妙用無窮.

這回我將用jQuery展示一點動態網頁的效果.
在ASP.NET專案中, 再開一個新的Web Form文件, 命名為Test1.aspx.

在Test1.aspx中加入下列程式碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="WebTest.Test1" %>



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <style type="text/css">
        div { 
            background-color:#0033CC; 
            color:#FF0066;
            width:100px; 
            border: 1px solid #C1DAD7; 
        }
    </style>


    <form id="form1" runat="server">
        <input id="btnDynamic"type="button" value="動態展示" />
        <asp:Panel ID="pnlDynamic" runat="server">
            這是一個動態展示網頁, 按下Button後, 會將本字串動態變化
        </asp:Panel>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#btnDynamic").click(function () {
                    $("#pnlDynamic").animate(
                    {
                        width: "500px",
                        opacity: 0.5,
                        fontSize: "16px"
                    }, 1800);
                });
            }); 
        </script>
    </form>

這個網頁執行的效果, 一開始為:

按下Button後...

Panel一開始是100px寬度, 會隨著時間(1800毫秒)而拉長到500px, 而顏色會逐漸變淡, 這中間的變化就要請泰大來側錄了....