jQuery Alert 对话框插件

Gil Fink

4.50/5 (4投票s)

2010年10月2日

CPOL

2分钟阅读

66642

jQuery Alert 对话框插件

引言

当你想在web应用的客户端提醒用户时，你可能会因为使用JavaScript内置的alert而感到尴尬(或者你根本不在乎)。我知道我确实感到尴尬。在我看来，JavaScript内置的alert非常丑陋，因此我尝试使用替代方案。在这篇文章中，我将展示一个非常有用的替代方案，我最近在多个项目中使用了它——jQuery Alert Dialogs插件。

jQuery Alert 对话框插件

使用jQuery 的好处之一是jQuery生态系统中存在的jQuery插件数量众多。但是，插件数量之多也使得很难找到每个所需行为的理想插件。我经常使用的一个插件是jQuery Alert Dialogs。该插件“旨在替换标准JavaScript alert()、confirm()和prompt()函数提供的基本功能”。该插件还模拟了这些标准函数的使用，并使你能够创建自己的样式。

如何使用该插件？

首先，你需要从此链接下载该插件——jQuery Alert Dialogs。你还需要下载jQuery UIDraggable插件，该插件依赖于它（或者像我一样下载整个jQuery UI包）。下载所有相关的脚本后，你需要将这些插件添加到你的web应用程序中。这是我的示例解决方案的顺序。

在默认页面中，我在头部部分添加了以下链接。

<head runat="server">
    <title></title>
    <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" />
</head>

现在，你就可以使用插件中包含的方法了。

jAlert(message, [title, callback]) – 创建一个警报。
jConfirm(message, [title, callback]) – 创建一个确认警报，它在提供的回调函数中处理确认。
jPrompt(message, [value, title, callback]) – 创建一个提示警报，它在提供的回调函数中处理用户输入的值。

以下示例显示如何使用alert和prompt。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Defualt.aspx.cs" 
	Inherits="WebApplication6.Defualt" %>
<!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 runat="server">
    <title></title>
    <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" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnAlert").click(function () {
                jAlert('Pushed the alert button', 'Alert Dialog');
            });
            $("#btnPrompt").click(function () {
                jPrompt('Type some value:', '', 'Prompt Dialog', function (typedValue) {
                    if (typedValue) {
                        jAlert('You typed the following ' + typedValue);
                    }
                });
             });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="Alert Me" id="btnAlert" />
        <input type="button" value="Prompt Me" id="btnPrompt" />
    </div>
    </form>
</body>
</html>

以及按下提示按钮的输出。

摘要

jQuery Alert Dialogs插件是一个非常有用的插件。避免使用内置的alert，开始使用样式更美观、更漂亮的alert。如果提供的样式不符合你的需求，则可以自定义它并使其更适合。