iT邦幫忙

9

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

從前一個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, 而顏色會逐漸變淡, 這中間的變化就要請泰大來側錄了....

簡單的一個animate指令, 就能完成以前要花上百行程式才或許能達成的效果, jQuery在用戶端效果的威力呈現可見一般.

在這個程式段裏, 我用到CSS指令, 這在網頁排版上是非常好用的指令集, 在談JavaScript時, 通常也會把CSS拿進來一起討論, 就是為了豐富網頁的變化.

現在HTML5正在推動中, 最新版本的Visual Studio就把HTML 5當成網頁開發標準語言, 在我這次分享的最後幾篇PO文會大略談到HTML5和JavaScript的合作關係.

這篇, 粗略的介紹了jQuery的動態指令的運用, 下一篇會討論jQuery的更多應用.


0
wordsmith
iT邦高手 1 級 ‧ 2012-07-18 18:12:54

賽大卯起來po文啦 讚

0
ted99tw
iT邦高手 1 級 ‧ 2012-07-19 00:32:51

寫得太好了,賞賽大嫂荷葉一張~~~

我要留言

立即登入留言