[jQuery] 酷炫的jQuery Alert外掛套件 csscody alert

2011-03-02

18070
0
jQuery
2011-12-18

[jQuery] 酷炫的jQuery Alert外掛套件

這套jQuery Alert套件大概是我找過樣式不錯看，特效也不差的套件，以下先只簡介Alert視窗的用法(for ASP.net)

在aspx頁

<!--引用jQuery核心函式庫-->
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <!--註：以下寫法jQuery跑不起來
    <script type="text/javascript" src="js/jquery.min.js" />
    -->


    <!--引用jQuery Alert plugin js和css -->
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/alertbox.js"></script>
    <link rel="stylesheet" type="text/css" href="js/style.css" />
    <!--注意css檔裡有定義圖檔路徑(js和images目錄在同一層)-->

簡單範例(官方的)：

<!--使用範例-->
     <a onclick="csscody.alert('<h1>訊息</h1><p>這是一個Alert小視窗。</p>');return false;" href="http://www.csshook.com/">測試連結</a>
     <!--return false目的是為了避免連結http://www.csshook.com/-->

按鈕按下去postback後出現Alert

    protected void Button1_Click(object sender, EventArgs e)
    {

        ClientScript.RegisterClientScriptBlock(typeof(Page), "key", "$(document).ready(function(){csscody.alert('Hello');});", true);

    }

postBack後，出現Alert視窗，使用者按下OK後，網頁導向另一頁面

    protected void Button2_Click(object sender, EventArgs e)
    {
        ClientScript.RegisterClientScriptBlock(typeof(Page), "key", "$(document).ready(function () { " +
                                                                                                      "csscody.alert('Hello',"+
                                   "{ onComplete: function () {"+
                                       "location.href = 'http://www.google.com.tw';"+
                                                             "}"+
                                   "}"+
                         "); "+
         "});"
         
         
         , true);
    }

完整程式碼下載(含VB語法)：Download

demo

下一篇：[ASP.net WebForm] jQuery csscody confirm整合GridView的刪除提示

其他：jQuery UI Dialog(同樣可以凍結視窗)

回首頁