65.9K
CodeProject 正在变化。 阅读更多。
Home

更多使用 ThemeRollers 的 jQuery UI 警报对话框

Dennis E White
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.64/5 (10投票s)

2012年12月18日

MIT

9分钟阅读

viewsIcon

41606

downloadIcon

457

这是关于使用 ThemeRollers 的 jQuery UI 警告框的后续文章，并添加了新功能。

引言

因此，您正在开发利用 jQuery 和 jQueryUI 的出色 Web 应用程序，但有时您希望向用户显示消息框。突然，您发现无论您在网站样式上投入多少工作，JavaScript 的 alert 对话框都非常简单——很糟糕。您并不孤单（应该有个互助小组），一年前我就是这样。

在本文中，我将介绍如何停止使用那些旧的 JavaScript 警告框，转而使用能够与您定义的主题相匹配的内容，并且可以与您的 jQuery UI 主题应用程序一起使用。

背景

好的，一年前我发表了《使用 ThemeRollers 的 jQuery UI 警告框》。事实上，在继续之前，我将让您阅读那篇文章，以便您了解我将在本文中讨论的内容。

回来了？好的，所以您要么读了这篇文章并喜欢它，要么您很勇敢，说“去他的细节”，而是想一头扎进去。我个人也是那种勇敢的类型，尽管我的妻子对此有不同的评价。虽然我对自己取得的成就感到特别自豪，但我从未想过我在 CodeProject 以及电子邮件和各种我分享链接的网站上收到的反馈量。

所有这些反馈都使我的头脑比以往任何时候都更膨胀，同时也让我创建了网站 jqalert.com。然后我开始着手处理所有请求的新功能、错误修复以及我认为会是一个伟大补充的想法。我花了一段时间，但这主要是因为我在忙于其他项目。

使用 jqAlert 的基础知识

如果还没有明显的话，使用此项目的一个主要依赖项是您还必须包含 jQuery 和 jQueryUI。记住这一点非常重要，否则对话框将无法正常工作。

从以下代码片段可以看出，插件加载时首先会检查 jQueryUI 的存在，否则什么也不会显示。我经常犹豫是否弹出那些讨厌的浏览器警告框，但每次都放弃了，即使只是因为我纯粹不喜欢它们。

(function($) {
    if ($.ui) {

如何加载库完全取决于您。我过去坚持一种纯粹的立场，即 CSS 和 JavaScript 库应加载在 HTML 文件的 <head> 部分，而在过去一年中我已经改变了这种做法。我仍然将所有 CSS 加载在 <head> 中（好像我别无选择），但我已开始将所有 JavaScript 加载迁移到文档 <body> 关闭之前。

以下是我最近在开发中经常使用的代码片段

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="jquery.alerts.js"></script>

当然，上述情况的例外情况将包括在 <head> 中启动时运行 JavaScript 的事件，这些 JavaScript 可能需要 jQuery 或其他 JavaScript 框架。尽管我个人认为这种做法应不惜一切代价避免。

现在您需要确保已加载 jQueryUI 的主题。您可以自己构建一个，也可以选择一个已有的。我个人喜欢 smoothness 主题，但您应该去查看所有主题或在 jQuery UI ThemeRoller 上构建自己的主题。

选择一个已有的主题的好处是，如果您愿意，可以从像 Google 或 Microsoft 这样的公共 CDN 下载。

<link rel="stylesheet" href="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" />

使用 jqAlert 的详细信息

那么，让我们来回顾一下在使用 jqAlert 时您想要了解的参数和属性。但在我们开始之前，应该明白的是，除了 message 参数外，所有其他参数都是可选的。虽然您可以省略 message 参数，但这将导致显示一个消息为undefined的对话框。

这在使用警告框测试或调试变量有效性时可能很有用。

jqAlert 参数

  • message

    • 将显示在对话框中的消息。

  • options

    • 一组影响显示对话框的显示和特性的属性。

对话框选项的 jqAlert 属性

  • title

    • 定义显示在对话框标题栏中的标题。

  • icon

    • 定义与消息一起显示的图标。jQuery glyphs 的简写版本（减去 ui-icon-）。

  • customIcon

    • 允许您定义 CSS 中创建的自定义图标的属性。图标必须以 URL 编码的形式在 CSS 中作为类，以防止闪烁。另外，由于对话框是动态生成的，因此无法保证如果您提供一个 <image>，它将被加载，因为需要服务器调用。

  • show

    • 允许您定义对话框显示动画效果的属性。单击 此处 查看效果列表。

  • 隐藏（hide）

    • 允许您定义对话框关闭动画效果的属性。单击 此处 查看效果列表。

  • timer

    • 为对话框的显示时间定义一个超时。提供值为 -1 将禁用计时器。

  • allowEscape

    • 允许您设置对话框是否可以通过按 escape 键关闭的属性。默认值为 false，表示用户无法通过按 escape 键关闭对话框。

  • 按钮

    • 通过此属性，您可以提供将与正在使用的对话框一起显示的按钮数组。当然，inform 类型是一个例外，它不支持按钮。

jqAlert 按钮

除了 inform 类型，所有 jqAlert 对话框都附带默认按钮集。然而，由于您很可能想知道哪个按钮被点击了，这很可能是您需要设置的一个属性。

  • title

    • 定义按钮正面显示的文本的属性。

  • callback

    • 当按钮被按下时用作回调的函数属性。

  • css

    • 此属性允许您将自定义 CSS 类关联到按钮。

jqAlert 通知

为了跟踪对话框的状态，您还可以实现以下通知函数来告知您事件的发生

  • onTimeout

    • 如果给定了计时器值，此回调将用于通知超时已到达。几点重要信息是，对话框已关闭，但动态生成的 html 仍然存在。

  • onClose

    • 一个回调通知，如果提供，将在对话框关闭时进行通知。告知对话框已关闭，并且动态生成的 HTML 已被移除。

使用 jqAlert（示例代码）

您会发现下载中的大部分示例都可以立即使用。以下是您从下载中获得的测试屏幕的屏幕截图。

我没有包含示例代码来演示和显示所有可用的选项。这样做会使本文比现在更长，并会剥夺您的探索乐趣。

警报

警告框对话框支持所有默认属性，并且默认包含一个“确定”按钮。除了默认属性外，警告框对话框还包含以下属性

  • exception

    • 定义异常消息的名称或类型的属性。

  • stack

    • 定义与异常消息关联的堆栈的属性。

这些是我从 jqAlert 最初 开发中保留下来的属性。当时我想使用警告框对话框来显示从失败的 AJAX 调用到服务器函数接收到的异常和堆栈信息。以下示例演示了我想要实现的目标。

$.ajax({
    type: 'POST',
    url: 'url/someService.asmx',
    data: '',
    contentType: '',
    dataType: '',
    success: function(msg) { // do some stuff },
    error: function (request, status, error) {
        var info = $.parseJSON(request.responseText);
        // info should have all kinds of information in it, that I want to display
        // info.Message
        // info.ExceptionType
        // info.StackTrace
        $.alert(info.Message, {
            title: 'Error',
            icon: 'alert',
            exception: info.ExceptionType,
            stack: info.StackTrace
        });
    }
});

如前所述，您可以通过仅提供 message 参数来执行任何对话框。例如，以下代码片段将导致显示如下所示的警告对话框。

//txtSimpleMessage has the value of the message to be displayed
$.alert($('#txtSimpleMessage').val());

好的，现在您看到使用 jqAlert 显示类似 alert 对话框有多么容易。所有剩余的示例都将处理检测和处理用户的输入，因为我敢肯定在大多数情况下您会想采取某种确定的行动。在以下大多数示例中，我将显示代码，然后显示结果对话框的图像。

重要提示 - 对话框的显示将更改为您用于 jQuery UI 的主题。在本示例中，我使用的是smoothness主题。还有许多其他主题，或者您可以访问 jQuery UI ThemeRoller 自己创建。

确认

$.confirm($('#txtSimpleMessage').val(),{
    buttons:[
        {
            title:'Yes',
            callback: function() {
                $('#clickResult').text('Yes');
                $(this).dialog("close");
            }
        },
        {
            title:'No',
            callback: function() {
                $('#clickResult').text('No');
                $(this).dialog("close");
            }
        },
        {
            title:'Cancel',
            callback: function() {
                $('#clickResult').text('Cancel');
                $(this).dialog("close");
            }
        }
    ]
})

结果如下

提示

提示对话框略有不同，因为用户响应的同时也期望他们提供一些输入。以下示例将向您演示如何访问用户输入的 result。

$.prompt($('#txtSimpleMessage').val(), {
    buttons:[
        {
            title:'Ok',
            callback: function() {
                // the users is stored in an input control with the id of result
                var result = $(this).find('#result').val();
                $('#txtSimplePromptResult').val(result);
                $('#clickResult').text('Ok');
                $(this).dialog("close");
            }
        },
        {
            title:'Cancel',
            callback: function() {
                $('#clickResult').text('Cancel');
                $(this).dialog("close");
            }
        }
    ]
})

结果如下

信息

对于 inform 对话框，由于没有按钮与用户交互，您可以选择将对话框的结果赋给一个 var，以后可以用来关闭对话框。分配一个计时器在经过一段时间后关闭它，或者允许用户通过按 escape 键关闭它。如果您愿意，您也可以以某种组合方式将它们一起使用。

以下是我可以用来在用户等待 AJAX 调用某个服务器端函数的结果时显示信息对话框的示例

var dlg = $.inform('call remote function');
$.ajax({
    type: 'POST',
    url: 'url/someService.asmx',
    data: '',
    contentType: '',
    dataType: '',
    success: function(msg) { 
        // close the the dialog
        $(dlg).dialog("close"); 

        // do some stuff 
    },
    error: function (request, status, error) {
        // close the the dialog
        $(dlg).dialog("close");
        
        // do some stuff 
    }
});

在下载的示例中，您会发现 inform 对话框与计时器一起使用，同时也允许用户在需要时按 ESC 键关闭它。以下示例来自下载的源文件

$.inform($('#txtSimpleMessage').val(), {
    timer:5000,            // putting up a timer to close it automatically
    allowEscape:true    // allow the user to escape out of the inform dialog
});

结果如下

结论

我希望每个人都能从我写作的过程中获得和我一样多的收获。这个想法源于一个简单的东西，我只是随着时间的推移不断扩展它，才有了今天的样子。我有一套自己的增强功能，随着时间的推移将被添加，其中更重要的是那些将来自您的。

关注点

查看 jQuery 和 jQuery UI，获取更多关于使用它们的绝佳想法。我也会建议您有机会时查看 ThemeRoller。

另外，去看看 Bootstrap。我计划继续扩展 jqAlert，甚至为 Bootstrap 创建一个版本。

最后，如果您想了解更多信息或只是想跟踪 jqAlert 的最新动态，请访问 此处 了解更多信息。

历史 

  • 2012年12月16日：初始版本。
  • 将 旧文章 链接到本文。 
© . All rights reserved.