JQuery的Alert插件介绍

有没有厌倦了原来那alert那个风格，总是一个感叹号。有时使得UE不好，今天我们介绍使用Jquery Alert插件，使用它可以用来替换JScript中的alert,confirm,prompt 下载JS文件引用到page中，如下代码：

   1:  <!-- Dependencies -->

   2:  <script src="/path/to/jquery.js" type="text/javascript"></script>

   3:  <script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>

   4:  <!-- Core files -->

   5:  <script src="/path/to/jquery.alerts.js" type="text/javascript"></script>

   6:  <link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

注意其中draggable是用来实现拖拉的，如不需要这个功能不就不用引用。在目前最近的Jquery1.42下应用引用：

<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>

<script src="Scripts/jquery.alerts.js" type="text/javascript"></script>

<link href="Content/Style/jquery.alerts.css" rel="stylesheet" type="text/css" />

主要方法有：

可以参下面的示例Code:

   1:  <%@  Page Language="C#" AutoEventWireup="true" CodeBehind="Defualt.aspx.cs" Inherits="WebApplication6.Defualt" %>

   2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   3:  <html xmlns="http://www.w3.org/1999/xhtml">

   4:  <head id="Head1" runat="server">

   5:      <title></title>

   6:      <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

   7:      <script src="Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>

   8:      <script src="Scripts/jquery.alerts.js" type="text/javascript"></script>

   9:      <link href="Content/Style/jquery.alerts.css" rel="stylesheet" type="text/css" />

  10:      <script type="text/javascript">

  11:          $(document).ready(function () {

  12:              $("#btnAlert").click(function ()

  13:              { jAlert('Pushed the alert button', 'Alert Dialog'); });

  14:              $("#btnPrompt").click(function () {

  15:                  jPrompt('Type some value:', '', 'Prompt Dialog', function (typedValue) {

  16:                      if (typedValue) {

  17:                          jAlert('You typed the following ' + typedValue);

  18:                      }

  19:                  });

  20:              });

  21:          });

  22:           </script>

  23:  </head>

  24:  <body>

  25:      <form id="form1" runat="server">

  26:      <div>

  27:          <input type="button" value="Alert Me" id="btnAlert" />

  28:          <input type="button" value="Prompt Me" id="btnPrompt" />

  29:      </div>

  30:      </form>

  31:  </body>

  32:  </html>

最后alert效果图：